@spavn/ui 0.0.1

package/src/lib/tabs/Tabs.test.ts

@@ -0,0 +1,150 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Tabs from './Tabs.vue'
+import TabsList from './TabsList.vue'
+import TabsTrigger from './TabsTrigger.vue'
+import TabsContent from './TabsContent.vue'
+
+describe('Tabs', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Tabs, {
+      props: { defaultValue: 'tab1' },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(Tabs, {
+      props: { defaultValue: 'tab1' },
+      slots: { default: '<div>Tabs content</div>' },
+    })
+    expect(wrapper.text()).toContain('Tabs content')
+  })
+
+  it('renders with TabsList and TabsTrigger', () => {
+    const wrapper = mount(Tabs, {
+      props: { defaultValue: 'tab1' },
+      slots: {
+        default: {
+          template: `
+            <TabsList>
+              <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+              <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+            </TabsList>
+          `,
+          components: { TabsList, TabsTrigger },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('Tab 1')
+    expect(wrapper.text()).toContain('Tab 2')
+  })
+
+  it('renders full tabs with content', () => {
+    const wrapper = mount(Tabs, {
+      props: { defaultValue: 'tab1' },
+      slots: {
+        default: {
+          template: `
+            <TabsList>
+              <TabsTrigger value="tab1">First</TabsTrigger>
+              <TabsTrigger value="tab2">Second</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tab1">First content</TabsContent>
+            <TabsContent value="tab2">Second content</TabsContent>
+          `,
+          components: { TabsList, TabsTrigger, TabsContent },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('First')
+    expect(wrapper.text()).toContain('First content')
+  })
+
+  it('shows correct content for defaultValue', () => {
+    const wrapper = mount(Tabs, {
+      props: { defaultValue: 'tab2' },
+      slots: {
+        default: {
+          template: `
+            <TabsList>
+              <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+              <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tab1">Content 1</TabsContent>
+            <TabsContent value="tab2">Content 2</TabsContent>
+          `,
+          components: { TabsList, TabsTrigger, TabsContent },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('Content 2')
+  })
+})
+
+describe('TabsList', () => {
+  it('renders correctly inside Tabs', () => {
+    const wrapper = mount(Tabs, {
+      props: { defaultValue: 'tab1' },
+      slots: {
+        default: {
+          template: '<TabsList><span>List</span></TabsList>',
+          components: { TabsList },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('List')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Tabs, {
+      props: { defaultValue: 'tab1' },
+      slots: {
+        default: {
+          template: '<TabsList class="custom-list"><span>List</span></TabsList>',
+          components: { TabsList },
+        },
+      },
+    })
+    expect(wrapper.html()).toContain('custom-list')
+  })
+})
+
+describe('TabsTrigger', () => {
+  it('renders trigger text', () => {
+    const wrapper = mount(Tabs, {
+      props: { defaultValue: 'tab1' },
+      slots: {
+        default: {
+          template: `
+            <TabsList>
+              <TabsTrigger value="tab1">My Tab</TabsTrigger>
+            </TabsList>
+          `,
+          components: { TabsList, TabsTrigger },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('My Tab')
+  })
+})
+
+describe('TabsContent', () => {
+  it('renders content for active tab', () => {
+    const wrapper = mount(Tabs, {
+      props: { defaultValue: 'active' },
+      slots: {
+        default: {
+          template: `
+            <TabsList>
+              <TabsTrigger value="active">Active</TabsTrigger>
+            </TabsList>
+            <TabsContent value="active">Active content</TabsContent>
+          `,
+          components: { TabsList, TabsTrigger, TabsContent },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('Active content')
+  })
+})

package/src/lib/tabs/Tabs.vue

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

package/src/lib/tabs/TabsContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { TabsContent } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <TabsContent
+    v-bind="$attrs"
+    :class="
+      cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/lib/tabs/TabsList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { TabsList } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <TabsList
+    v-bind="$attrs"
+    :class="
+      cn(
+        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground shadow-depth-1',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/lib/tabs/TabsTrigger.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { TabsTrigger } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="$attrs"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all 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=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/src/lib/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
+export { default as TabsContent } from './TabsContent.vue'

package/src/lib/textarea/Textarea.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Textarea from './Textarea.vue'
+
+describe('Textarea', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Textarea)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('TEXTAREA')
+  })
+
+  it('binds modelValue to textarea value', () => {
+    const wrapper = mount(Textarea, {
+      props: { modelValue: 'hello world' },
+    })
+    expect((wrapper.element as HTMLTextAreaElement).value).toBe('hello world')
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const wrapper = mount(Textarea, {
+      props: { modelValue: '' },
+    })
+    await wrapper.setValue('new text')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new text'])
+  })
+
+  it('sets placeholder attribute', () => {
+    const wrapper = mount(Textarea, {
+      props: { placeholder: 'Type here...' },
+    })
+    expect(wrapper.attributes('placeholder')).toBe('Type here...')
+  })
+
+  it('is disabled when disabled prop is true', () => {
+    const wrapper = mount(Textarea, {
+      props: { disabled: true },
+    })
+    expect(wrapper.attributes('disabled')).toBeDefined()
+  })
+})

package/src/lib/textarea/Textarea.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  disabled?: boolean
+  placeholder?: string
+  modelValue?: string
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <textarea
+    :class="
+      cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+        'ring-offset-background',
+        'placeholder:text-muted-foreground',
+        '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 focus-visible:shadow-depth-2 transition-elevation',
+        props.class
+      )
+    "
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :value="modelValue"
+    @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+  />
+</template>

package/src/lib/theme-selector/README.md

@@ -0,0 +1,154 @@
+# ThemeSelector Component
+
+A Vue 3 component for selecting visual themes with a beautiful card-based interface.
+
+## Files Created
+
+1. **`/packages/components/src/lib/theme-selector/ThemeSelector.vue`** — Main component file
+2. **`/packages/components/src/lib/theme-selector/index.ts`** — Export file
+3. **Updated `/packages/components/src/index.ts`** — Added exports
+
+## Installation
+
+The component is now available in the @spavn/ui library:
+
+```typescript
+import { ThemeSelector, type ThemeOption } from '@spavn/ui'
+```
+
+## Usage Examples
+
+### Basic Usage (Light/Dark)
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { ThemeSelector } from '@spavn/ui'
+
+const currentTheme = ref('light')
+</script>
+
+<template>
+  <ThemeSelector v-model="currentTheme" />
+</template>
+```
+
+### With Custom Options
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { ThemeSelector } from '@spavn/ui'
+
+const currentTheme = ref('system')
+
+const themeOptions = [
+  { value: 'light', label: 'Light', preview: 'light' },
+  { value: 'dark', label: 'Dark', preview: 'dark' },
+  { value: 'system', label: 'System', preview: 'light' },
+  { value: 'midnight', label: 'Midnight', preview: 'dark' }
+]
+</script>
+
+<template>
+  <ThemeSelector 
+    v-model="currentTheme" 
+    :options="themeOptions"
+  />
+</template>
+```
+
+### With System Theme Option
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { ThemeSelector } from '@spavn/ui'
+
+const theme = ref('system')
+</script>
+
+<template>
+  <ThemeSelector 
+    v-model="theme"
+    :options="[
+      { value: 'light', label: 'Light', preview: 'light' },
+      { value: 'dark', label: 'Dark', preview: 'dark' },
+      { value: 'system', label: 'System', preview: 'light' }
+    ]"
+  />
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `modelValue` | `string` | **required** | Currently selected theme value |
+| `options` | `ThemeOption[]` | Light/Dark | Array of theme options to display |
+| `class` | `string` | - | Additional CSS classes for the container |
+
+## ThemeOption Interface
+
+```typescript
+interface ThemeOption {
+  /** Unique identifier for the theme */
+  value: string
+  /** Display label for the theme */
+  label: string
+  /** Visual preview type */
+  preview: 'light' | 'dark' | 'custom'
+  /** Optional icon name */
+  icon?: string
+}
+```
+
+## Features
+
+### Visual Design
+- **Light Card**: White background with blue selection indicator
+- **Dark Card**: Gray-800 background with amber/yellow selection indicator
+- **Watermark**: "COLORS" text watermark behind the cards
+- **Preview Content**: Shows mini UI elements including "Aa" text and sample bars
+
+### Interactions
+- Click to select
+- Radio-style selection (only one at a time)
+- Hover effects with shadow elevation
+- Scale animation on selection indicator
+- Ring highlight on selected state
+
+### Keyboard Navigation
+- `ArrowRight` / `ArrowDown` — Move focus to next option
+- `ArrowLeft` / `ArrowUp` — Move focus to previous option
+- `Enter` / `Space` — Select focused option
+- `Home` — Move focus to first option
+- `End` — Move focus to last option
+
+### Accessibility
+- `role="radiogroup"` on container
+- `role="radio"` on each option
+- `aria-checked` attribute indicating selection state
+- `aria-label` on each option
+- Tabindex management for keyboard focus
+- Focus-visible styles with ring
+
+### Dark Mode Support
+The component adapts to dark mode:
+- Watermark color changes (gray-200/50 → gray-800/50)
+- Label colors adapt
+- Hover states are adjusted
+
+## Styling
+
+The component uses Tailwind CSS classes:
+- Cards: `rounded-2xl`, `shadow-depth-2`
+- Selection indicator: 24px circle with scale animation
+- Gap between options: 16px
+- Card size: 120px × 100px
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `string` | Emitted when selection changes (for v-model) |