@spavn/ui 0.0.1

package/src/lib/menubar/MenubarSubTrigger.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { MenubarSubTrigger } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; inset?: boolean }>()
+</script>
+
+<template>
+  <MenubarSubTrigger
+    v-bind="$attrs"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        inset && 'pl-8',
+        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="ml-auto h-4 w-4"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  </MenubarSubTrigger>
+</template>

package/src/lib/menubar/MenubarTrigger.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { MenubarTrigger } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <MenubarTrigger
+    v-bind="$attrs"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </MenubarTrigger>
+</template>

package/src/lib/menubar/index.ts

@@ -0,0 +1,15 @@
+export { default as Menubar } from './Menubar.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
+export { default as MenubarContent } from './MenubarContent.vue'
+export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
+export { default as MenubarMenu } from './MenubarMenu.vue'
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
+export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
+export { default as MenubarSub } from './MenubarSub.vue'
+export { default as MenubarSubContent } from './MenubarSubContent.vue'
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
+export { default as MenubarTrigger } from './MenubarTrigger.vue'

package/src/lib/modal/Modal.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import Modal from './Modal.vue'
+import ModalTrigger from './ModalTrigger.vue'
+import ModalContent from './ModalContent.vue'
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('Modal', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Modal, {
+      slots: { default: 'Modal content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('accepts open prop via attrs', () => {
+    const wrapper = mount(Modal, {
+      attrs: { open: true },
+      slots: { default: 'Modal content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+})
+
+describe('ModalTrigger', () => {
+  it('renders slot content inside Modal', () => {
+    const wrapper = mount(Modal, {
+      slots: {
+        default: () => h(ModalTrigger, null, { default: () => 'Open Modal' }),
+      },
+    })
+    expect(wrapper.text()).toContain('Open Modal')
+  })
+
+  it('renders trigger element with as-child behavior', () => {
+    // ModalTrigger uses as-child on DialogTrigger, so it renders the slot
+    // content directly rather than wrapping in its own button element.
+    const wrapper = mount(Modal, {
+      slots: {
+        default: () => h(ModalTrigger, null, { default: () => h('button', null, 'Trigger') }),
+      },
+    })
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Trigger')
+  })
+})
+
+describe('ModalContent', () => {
+  it('mounts without errors when modal is open', async () => {
+    // ModalContent uses DialogPortal which teleports to body.
+    // In jsdom, we verify the component mounts and close button text appears.
+    const wrapper = mount(Modal, {
+      attrs: { open: true },
+      slots: {
+        default: () => h(ModalContent, null, { default: () => 'Modal body' }),
+      },
+      attachTo: document.body,
+    })
+    await nextTick()
+    expect(document.body.textContent).toContain('Close')
+    wrapper.unmount()
+  })
+
+  it('renders close button in portaled content', async () => {
+    const wrapper = mount(Modal, {
+      attrs: { open: true },
+      slots: {
+        default: () => h(ModalContent, null, { default: () => 'Body' }),
+      },
+      attachTo: document.body,
+    })
+    await nextTick()
+    const srOnly = document.body.querySelector('.sr-only')
+    expect(srOnly?.textContent).toBe('Close')
+    wrapper.unmount()
+  })
+})

package/src/lib/modal/Modal.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emit = defineEmits<DialogRootEmits>()
+</script>
+
+<template>
+  <DialogRoot v-bind="props" @update:open="(v) => emit('update:open', v)">
+    <slot />
+  </DialogRoot>
+</template>

package/src/lib/modal/ModalClose.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DialogClose } from 'radix-vue'
+</script>
+
+<template>
+  <DialogClose as-child>
+    <slot />
+  </DialogClose>
+</template>

package/src/lib/modal/ModalContent.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { DialogContent, DialogClose, DialogPortal, DialogOverlay } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay class="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" />
+    <DialogContent
+      :class="cn(
+        'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4',
+        'border bg-background p-6 shadow-depth-5 duration-200 sm:rounded-lg',
+        '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',
+        props.class,
+      )"
+    >
+      <slot />
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+      >
+        <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>
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/src/lib/modal/ModalTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props" as-child>
+    <slot />
+  </DialogTrigger>
+</template>

package/src/lib/multi-select/MultiSelect.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxViewport,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { computed, ref } from 'vue'
+import MultiSelectItem from './MultiSelectItem.vue'
+
+export interface MultiSelectOption {
+  label: string
+  value: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string[]
+    options?: MultiSelectOption[]
+    placeholder?: string
+    searchable?: boolean
+    maxItems?: number
+    class?: string
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: () => [],
+    options: () => [],
+    placeholder: 'Select items...',
+    searchable: true,
+    disabled: false,
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+}>()
+
+const open = ref(false)
+const searchTerm = ref('')
+
+const selectedValues = computed({
+  get: () => props.modelValue,
+  set: (val: string[]) => emit('update:modelValue', val),
+})
+
+const filteredOptions = computed(() => {
+  if (!searchTerm.value) return props.options
+  const term = searchTerm.value.toLowerCase()
+  return props.options.filter((opt) =>
+    opt.label.toLowerCase().includes(term)
+  )
+})
+
+const selectedLabels = computed(() => {
+  return props.modelValue
+    .map((val) => props.options.find((opt) => opt.value === val))
+    .filter(Boolean) as MultiSelectOption[]
+})
+
+const isMaxReached = computed(() => {
+  return props.maxItems !== undefined && props.modelValue.length >= props.maxItems
+})
+
+function removeItem(value: string) {
+  emit(
+    'update:modelValue',
+    props.modelValue.filter((v) => v !== value)
+  )
+}
+</script>
+
+<template>
+  <ComboboxRoot
+    v-model="selectedValues"
+    v-model:open="open"
+    v-model:searchTerm="searchTerm"
+    multiple
+    :disabled="disabled"
+    v-bind="$attrs"
+    :class="cn('relative', props.class)"
+  >
+    <ComboboxAnchor
+      :class="
+        cn(
+          'flex min-h-10 w-full flex-wrap items-center gap-1 rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background shadow-depth-1',
+          'focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/20 focus-within:ring-offset-2',
+          disabled && 'cursor-not-allowed opacity-50'
+        )
+      "
+    >
+      <span
+        v-for="item in selectedLabels"
+        :key="item.value"
+        class="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-foreground"
+      >
+        {{ item.label }}
+        <button
+          type="button"
+          class="ml-0.5 rounded-sm opacity-70 ring-offset-background hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2"
+          :disabled="disabled"
+          @pointerdown.prevent.stop="removeItem(item.value)"
+        >
+          <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-3 w-3"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </span>
+
+      <ComboboxInput
+        v-if="searchable"
+        :placeholder="selectedLabels.length === 0 ? placeholder : ''"
+        class="ml-1 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed"
+        :disabled="disabled"
+        @keydown.enter.prevent
+      />
+      <span
+        v-else-if="selectedLabels.length === 0"
+        class="text-sm text-muted-foreground"
+      >
+        {{ placeholder }}
+      </span>
+
+      <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="ml-auto h-4 w-4 shrink-0 opacity-50"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </ComboboxAnchor>
+
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        :class="
+          cn(
+            'relative z-depth-3 max-h-96 min-w-[var(--radix-combobox-trigger-width)] 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]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',
+            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2'
+          )
+        "
+      >
+        <ComboboxViewport class="p-1">
+          <ComboboxEmpty class="py-6 text-center text-sm text-muted-foreground">
+            No results found.
+          </ComboboxEmpty>
+
+          <MultiSelectItem
+            v-for="option in filteredOptions"
+            :key="option.value"
+            :value="option.value"
+            :label="option.label"
+            :selected="modelValue.includes(option.value)"
+            :disabled="!modelValue.includes(option.value) && isMaxReached"
+          />
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>

package/src/lib/multi-select/MultiSelectItem.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ComboboxItem, ComboboxItemIndicator } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: string
+  value: string
+  label: string
+  selected?: boolean
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="$attrs"
+    :value="props.value"
+    :disabled="props.disabled"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-4 w-4 items-center justify-center">
+      <ComboboxItemIndicator>
+        <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>
+      </ComboboxItemIndicator>
+    </span>
+    <span>{{ props.label }}</span>
+  </ComboboxItem>
+</template>

package/src/lib/native-select/NativeSelect.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <div class="relative">
+    <select
+      :class="
+        cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-sm',
+          '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',
+          'shadow-depth-1',
+          props.class
+        )
+      "
+      v-bind="$attrs"
+    >
+      <slot />
+    </select>
+    <svg
+      class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 opacity-50"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  </div>
+</template>

package/src/lib/native-select/index.ts

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

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { NavigationMenuRoot } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative z-10 flex max-w-max flex-1 items-center justify-center',
+        props.class
+      )
+    "
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { NavigationMenuContent } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="$attrs"
+    :class="
+      cn(
+        'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { NavigationMenuIndicator } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="$attrs"
+    :class="
+      cn(
+        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+        props.class
+      )
+    "
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-depth-2" />
+  </NavigationMenuIndicator>
+</template>

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

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

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { NavigationMenuLink } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+const emits = defineEmits<{ 'select': [event: Event] }>()
+</script>
+
+<template>
+  <NavigationMenuLink
+    v-bind="$attrs"
+    :class="
+      cn(
+        'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+        props.class
+      )
+    "
+    @select="emits('select', $event)"
+  >
+    <slot />
+  </NavigationMenuLink>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { NavigationMenuList } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="$attrs"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center space-x-1',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { NavigationMenuTrigger } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="$attrs"
+    :class="
+      cn(
+        'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+        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="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  </NavigationMenuTrigger>
+</template>