@spavn/ui 0.0.1

package/src/lib/code-preview/CodePreview.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{
+  code: string
+  filename?: string
+  class?: string
+}>(), {
+  filename: '',
+})
+
+const activeTab = ref<'preview' | 'code'>('preview')
+const copied = ref(false)
+
+async function copyCode() {
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch {
+    // fallback
+    const ta = document.createElement('textarea')
+    ta.value = props.code
+    document.body.appendChild(ta)
+    ta.select()
+    document.execCommand('copy')
+    document.body.removeChild(ta)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  }
+}
+</script>
+
+<template>
+  <div :class="cn('rounded-xl border bg-card overflow-hidden', props.class)">
+    <!-- Tabs header -->
+    <div class="flex items-center justify-between border-b bg-muted/30 px-4 py-1.5">
+      <div class="flex gap-1">
+        <button
+          @click="activeTab = 'preview'"
+          :class="[
+            'rounded-md px-3 py-1 text-xs font-medium transition-colors',
+            activeTab === 'preview'
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          ]"
+        >
+          Preview
+        </button>
+        <button
+          @click="activeTab = 'code'"
+          :class="[
+            'rounded-md px-3 py-1 text-xs font-medium transition-colors',
+            activeTab === 'code'
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          ]"
+        >
+          Code
+        </button>
+      </div>
+
+      <!-- Copy button (visible on code tab) -->
+      <button
+        v-if="activeTab === 'code'"
+        @click="copyCode"
+        class="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground hover:bg-background"
+      >
+        <!-- Check icon when copied -->
+        <svg v-if="copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-success">
+          <path d="M20 6 9 17l-5-5"/>
+        </svg>
+        <!-- Copy icon -->
+        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
+        </svg>
+        {{ copied ? 'Copied' : 'Copy' }}
+      </button>
+    </div>
+
+    <!-- Preview panel -->
+    <div v-show="activeTab === 'preview'" class="p-6 sm:p-10">
+      <slot />
+    </div>
+
+    <!-- Code panel -->
+    <div v-show="activeTab === 'code'">
+      <div v-if="filename" class="border-b px-4 py-2 bg-muted/20">
+        <p class="text-[11px] font-mono text-muted-foreground">{{ filename }}</p>
+      </div>
+      <pre class="p-4 text-[13px] leading-relaxed overflow-x-auto"><code class="text-foreground/90">{{ code }}</code></pre>
+    </div>
+  </div>
+</template>

package/src/lib/collapsible/Collapsible.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Collapsible from './Collapsible.vue'
+import CollapsibleTrigger from './CollapsibleTrigger.vue'
+import CollapsibleContent from './CollapsibleContent.vue'
+
+describe('Collapsible', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Collapsible)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(Collapsible, {
+      slots: { default: '<div>Collapsible body</div>' },
+    })
+    expect(wrapper.text()).toContain('Collapsible body')
+  })
+
+  it('renders with trigger and content', () => {
+    const wrapper = mount(Collapsible, {
+      slots: {
+        default: {
+          template: `
+            <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+            <CollapsibleContent>Hidden content</CollapsibleContent>
+          `,
+          components: { CollapsibleTrigger, CollapsibleContent },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('Toggle')
+  })
+
+  it('renders content element with data-state open when defaultOpen is true', () => {
+    const wrapper = mount(Collapsible, {
+      props: { defaultOpen: true },
+      slots: {
+        default: {
+          template: `
+            <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+            <CollapsibleContent>Visible content</CollapsibleContent>
+          `,
+          components: { CollapsibleTrigger, CollapsibleContent },
+        },
+      },
+    })
+    expect(wrapper.html()).toContain('data-state="open"')
+  })
+
+  it('renders content element with data-state closed when not open', () => {
+    const wrapper = mount(Collapsible, {
+      slots: {
+        default: {
+          template: `
+            <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+            <CollapsibleContent>Hidden content</CollapsibleContent>
+          `,
+          components: { CollapsibleTrigger, CollapsibleContent },
+        },
+      },
+    })
+    expect(wrapper.html()).toContain('data-state="closed"')
+  })
+})
+
+describe('CollapsibleTrigger', () => {
+  it('renders trigger content inside Collapsible', () => {
+    const wrapper = mount(Collapsible, {
+      slots: {
+        default: {
+          template: '<CollapsibleTrigger>Click to expand</CollapsibleTrigger>',
+          components: { CollapsibleTrigger },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('Click to expand')
+  })
+})
+
+describe('CollapsibleContent', () => {
+  it('renders content element with correct classes when open', () => {
+    const wrapper = mount(Collapsible, {
+      props: { defaultOpen: true },
+      slots: {
+        default: {
+          template: '<CollapsibleContent class="my-content">Expanded content</CollapsibleContent>',
+          components: { CollapsibleContent },
+        },
+      },
+    })
+    expect(wrapper.html()).toContain('my-content')
+    expect(wrapper.html()).toContain('data-state="open"')
+  })
+})

package/src/lib/collapsible/Collapsible.vue

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

package/src/lib/collapsible/CollapsibleContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { CollapsibleContent } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CollapsibleContent
+    v-bind="$attrs"
+    :class="
+      cn(
+        'overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </CollapsibleContent>
+</template>

package/src/lib/collapsible/CollapsibleTrigger.vue

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

package/src/lib/collapsible/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'

package/src/lib/command/Command.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ComboboxRoot } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="$attrs"
+    :class="
+      cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground shadow-depth-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ComboboxRoot>
+</template>

package/src/lib/command/CommandDialog.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import Dialog from '@/lib/dialog/Dialog.vue'
+import DialogContent from '@/lib/dialog/DialogContent.vue'
+import Command from './Command.vue'
+
+const props = defineProps<{ open?: boolean }>()
+const emits = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+</script>
+
+<template>
+  <Dialog
+    :open="props.open"
+    @update:open="emits('update:open', $event)"
+  >
+    <DialogContent class="overflow-hidden p-0 shadow-depth-5">
+      <Command
+        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+      >
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/lib/command/CommandEmpty.vue

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

package/src/lib/command/CommandGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ComboboxGroup } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="$attrs"
+    :class="
+      cn(
+        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ComboboxGroup>
+</template>

package/src/lib/command/CommandInput.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ComboboxInput } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <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="mr-2 h-4 w-4 shrink-0 opacity-50"
+    >
+      <path d="m21 21-6.05-6.05M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
+    </svg>
+    <ComboboxInput
+      v-bind="$attrs"
+      :class="
+        cn(
+          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          props.class
+        )
+      "
+    />
+  </div>
+</template>

package/src/lib/command/CommandItem.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ComboboxItem } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+const emits = defineEmits<{ 'select': [event: Event] }>()
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+    @select="emits('select', $event)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>

package/src/lib/command/CommandLabel.vue

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

package/src/lib/command/CommandList.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ComboboxContent } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ComboboxContent
+    v-bind="$attrs"
+    :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)"
+  >
+    <slot />
+  </ComboboxContent>
+</template>

package/src/lib/command/CommandSeparator.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ComboboxSeparator } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="$attrs"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  />
+</template>

package/src/lib/command/index.ts

@@ -0,0 +1,9 @@
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandLabel } from './CommandLabel.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'

package/src/lib/context-menu/ContextMenu.vue

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

package/src/lib/context-menu/ContextMenuCheckboxItem.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItemIndicator,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+const emits = defineEmits<{ 'update:checked': [checked: boolean]; 'select': [event: Event] }>()
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+    @update:checked="emits('update:checked', $event)"
+    @select="emits('select', $event)"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <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>
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>

package/src/lib/context-menu/ContextMenuContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  ContextMenuContent,
+  ContextMenuPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      v-bind="$attrs"
+      :class="
+        cn(
+          'z-depth-3 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-depth-3',
+          'animate-in fade-in-0 zoom-in-95',
+          '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 />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>

package/src/lib/context-menu/ContextMenuGroup.vue

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

package/src/lib/context-menu/ContextMenuItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ContextMenuItem } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; inset?: boolean }>()
+const emits = defineEmits<{ 'select': [event: Event] }>()
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        props.class
+      )
+    "
+    @select="emits('select', $event)"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>

package/src/lib/context-menu/ContextMenuLabel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ContextMenuLabel } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; inset?: boolean }>()
+</script>
+
+<template>
+  <ContextMenuLabel
+    v-bind="$attrs"
+    :class="cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>

package/src/lib/context-menu/ContextMenuRadioGroup.vue

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

package/src/lib/context-menu/ContextMenuRadioItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+const emits = defineEmits<{ 'select': [event: Event] }>()
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+    @select="emits('select', $event)"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <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-2 w-2"
+        >
+          <circle cx="12" cy="12" r="6" fill="currentColor" />
+        </svg>
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>

package/src/lib/context-menu/ContextMenuSeparator.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ContextMenuSeparator } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ContextMenuSeparator
+    v-bind="$attrs"
+    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+  />
+</template>