@spavn/ui 0.0.1

package/src/lib/feature-card/FeatureCard.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { computed, type Component } from 'vue'
+
+interface Props {
+  icon?: Component | string
+  title: string
+  description?: string
+  selected?: boolean
+  disabled?: boolean
+  size?: 'default' | 'compact'
+  iconClass?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selected: false,
+  disabled: false,
+  size: 'default',
+})
+
+const emit = defineEmits<{
+  select: []
+}>()
+
+const handleClick = () => {
+  if (!props.disabled) {
+    emit('select')
+  }
+}
+
+const sizeClasses = {
+  default: {
+    card: 'p-6',
+    iconWrapper: 'w-14 h-14',
+    icon: 'w-6 h-6',
+    title: 'text-base',
+    description: 'text-sm',
+    gap: 'gap-3',
+  },
+  compact: {
+    card: 'p-4',
+    iconWrapper: 'w-10 h-10',
+    icon: 'w-5 h-5',
+    title: 'text-sm',
+    description: 'text-xs',
+    gap: 'gap-2',
+  },
+}
+
+const currentSize = computed(() => sizeClasses[props.size])
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        // Base styles
+        'relative flex flex-col items-center text-center rounded-2xl',
+        'bg-card',
+        'border border',
+        'shadow-depth-1',
+        'transition-all duration-200 ease-in-out',
+        // Size
+        currentSize.card,
+        currentSize.gap,
+        // Interactive states
+        !disabled && [
+          'cursor-pointer',
+          'hover:-translate-y-0.5 hover:shadow-depth-2',
+          'active:translate-y-0 active:shadow-depth-1',
+        ],
+        // Selected state
+        selected && [
+          'border-primary',
+          'ring-1 ring-primary',
+          'scale-[1.02]',
+        ],
+        // Disabled state
+        disabled && [
+          'opacity-50',
+          'cursor-not-allowed',
+        ],
+        props.class
+      )
+    "
+    role="button"
+    tabindex="0"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    @keydown.space.prevent="handleClick"
+  >
+    <!-- Selection indicator -->
+    <div
+      v-if="selected"
+      :class="
+        cn(
+          'absolute -top-2 -right-2',
+          'flex items-center justify-center',
+          'w-6 h-6 rounded-full',
+          'bg-foreground',
+          'text-background',
+          'shadow-md',
+          'transition-transform duration-200',
+          'z-10'
+        )
+      "
+    >
+      <!-- Checkmark SVG -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="w-3.5 h-3.5"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    </div>
+
+    <!-- Icon area with gradient background -->
+    <div
+      :class="
+        cn(
+          'flex items-center justify-center rounded-xl',
+          'bg-primary',
+          currentSize.iconWrapper,
+          iconClass
+        )
+      "
+    >
+      <slot name="icon">
+        <component
+          v-if="icon && typeof icon !== 'string'"
+          :is="icon"
+          :class="cn('text-primary-foreground', currentSize.icon)"
+        />
+        <div
+          v-else-if="icon && typeof icon === 'string'"
+          :class="cn('text-primary-foreground font-semibold', currentSize.icon)"
+        >
+          {{ icon }}
+        </div>
+      </slot>
+    </div>
+
+    <!-- Content -->
+    <div class="flex flex-col items-center gap-1">
+      <h3
+        :class="
+          cn(
+            'font-semibold text-card-foreground',
+            currentSize.title
+          )
+        "
+      >
+        {{ title }}
+      </h3>
+      <p
+        v-if="description"
+        :class="
+          cn(
+            'text-muted-foreground leading-relaxed',
+            currentSize.description
+          )
+        "
+      >
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

package/src/lib/feature-card/README.md

@@ -0,0 +1,139 @@
+# FeatureCard Component
+
+A selectable card component with an icon area, title, and description. Designed for feature selection interfaces.
+
+## Installation
+
+```typescript
+import { FeatureCard } from '@/lib/feature-card'
+```
+
+## Usage
+
+### Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FeatureCard } from '@/lib/feature-card'
+import { Shield, Zap } from 'lucide-vue-next'
+
+const isSafeSelected = ref(false)
+const isLatestSelected = ref(true)
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-4">
+    <FeatureCard
+      :icon="Shield"
+      title="Safe & Stable"
+      description="Uses well-tested dependencies"
+      :selected="isSafeSelected"
+      @select="isSafeSelected = !isSafeSelected"
+    />
+
+    <FeatureCard
+      :icon="Zap"
+      title="Latest"
+      description="Cutting-edge features and updates"
+      :selected="isLatestSelected"
+      @select="isLatestSelected = !isLatestSelected"
+    />
+  </div>
+</template>
+```
+
+### With Custom Icon Slot
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FeatureCard } from '@/lib/feature-card'
+import { Rocket } from 'lucide-vue-next'
+
+const isSelected = ref(false)
+</script>
+
+<template>
+  <FeatureCard
+    title="Deploy Now"
+    description="Push to production instantly"
+    :selected="isSelected"
+    @select="isSelected = !isSelected"
+  >
+    <template #icon>
+      <Rocket class="w-6 h-6 text-white" />
+    </template>
+  </FeatureCard>
+</template>
+```
+
+### Compact Size
+
+```vue
+<FeatureCard
+  :icon="Shield"
+  title="Basic"
+  description="For small teams"
+  size="compact"
+  :selected="true"
+/>
+```
+
+### Disabled State
+
+```vue
+<FeatureCard
+  :icon="Shield"
+  title="Enterprise"
+  description="Contact sales"
+  :disabled="true"
+  :selected="false"
+/>
+```
+
+### Custom Styling
+
+```vue
+<FeatureCard
+  :icon="Shield"
+  title="Custom"
+  description="With custom icon styling"
+  icon-class="from-purple-500 to-pink-500"
+  class="max-w-xs"
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `Component \| string` | `undefined` | Icon component or string to display |
+| `title` | `string` | **required** | Card title |
+| `description` | `string` | `undefined` | Card description |
+| `selected` | `boolean` | `false` | Whether the card is selected |
+| `disabled` | `boolean` | `false` | Whether the card is disabled |
+| `size` | `'default' \| 'compact'` | `'default'` | Card size variant |
+| `iconClass` | `string` | `undefined` | Additional classes for the icon wrapper |
+| `class` | `string` | `undefined` | Additional classes for the card |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `select` | Emitted when the card is clicked (if not disabled) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `icon` | Custom icon content (overrides the `icon` prop) |
+
+## Design Tokens
+
+The component uses the following CSS variables:
+
+- `shadow-depth-1` - Default card shadow
+- `shadow-depth-2` - Hover state shadow
+- Colors follow the gray scale for borders and text
+- Blue gradient (`blue-500` to `blue-600`) for the icon background

package/src/lib/feature-card/index.ts

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

package/src/lib/field/Field.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/field/FieldDescription.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

package/src/lib/field/FieldError.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <p :class="cn('text-sm font-medium text-destructive', props.class)">
+    <slot />
+  </p>
+</template>

package/src/lib/field/FieldLabel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  for?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <label
+    :for="props.for"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </label>
+</template>

package/src/lib/field/index.ts

@@ -0,0 +1,4 @@
+export { default as Field } from './Field.vue'
+export { default as FieldLabel } from './FieldLabel.vue'
+export { default as FieldDescription } from './FieldDescription.vue'
+export { default as FieldError } from './FieldError.vue'

package/src/lib/hover-card/HoverCard.vue

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

package/src/lib/hover-card/HoverCardContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  HoverCardContent,
+  HoverCardPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{ class?: string; sideOffset?: number }>(), { sideOffset: 4 })
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="$attrs"
+      :side-offset="props.sideOffset"
+      :class="
+        cn(
+          'z-depth-3 w-64 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 />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>

package/src/lib/hover-card/HoverCardTrigger.vue

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

package/src/lib/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'

package/src/lib/icon/Icon.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+import * as icons from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<{
+  name: string
+  size?: number | string
+  strokeWidth?: number | string
+  class?: string
+}>(), {
+  size: 16,
+  strokeWidth: 2,
+})
+
+const iconComponent = computed(() => {
+  // Convert kebab-case or snake_case to PascalCase
+  const pascal = props.name
+    .replace(/[-_](.)/g, (_, c) => c.toUpperCase())
+    .replace(/^(.)/, (_, c) => c.toUpperCase())
+  return (icons as any)[pascal] || null
+})
+</script>
+
+<template>
+  <component
+    v-if="iconComponent"
+    :is="iconComponent"
+    :size="size"
+    :stroke-width="strokeWidth"
+    :class="cn('shrink-0', props.class)"
+  />
+</template>

package/src/lib/input/Input.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Input from './Input.vue'
+
+describe('Input', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Input)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('input').exists()).toBe(true)
+  })
+
+  it('binds modelValue to input value', () => {
+    const wrapper = mount(Input, {
+      props: { modelValue: 'hello' },
+    })
+    expect(wrapper.find('input').element.value).toBe('hello')
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const wrapper = mount(Input, {
+      props: { modelValue: '' },
+    })
+    await wrapper.find('input').setValue('new value')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new value'])
+  })
+
+  it('sets placeholder attribute', () => {
+    const wrapper = mount(Input, {
+      props: { placeholder: 'Enter text...' },
+    })
+    expect(wrapper.find('input').attributes('placeholder')).toBe('Enter text...')
+  })
+
+  it('is disabled when disabled prop is true', () => {
+    const wrapper = mount(Input, {
+      props: { disabled: true },
+    })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+
+  it('applies size prop classes', () => {
+    const wrapper = mount(Input, {
+      props: { size: 'sm' },
+    })
+    const classes = wrapper.find('input').classes().join(' ')
+    expect(classes).toContain('h-8')
+    expect(classes).toContain('text-xs')
+  })
+
+  it('applies lg size prop classes', () => {
+    const wrapper = mount(Input, {
+      props: { size: 'lg' },
+    })
+    const classes = wrapper.find('input').classes().join(' ')
+    expect(classes).toContain('h-12')
+    expect(classes).toContain('text-base')
+  })
+
+  it('sets type attribute', () => {
+    const wrapper = mount(Input, {
+      props: { type: 'password' },
+    })
+    expect(wrapper.find('input').attributes('type')).toBe('password')
+  })
+
+  it('defaults type to text', () => {
+    const wrapper = mount(Input)
+    expect(wrapper.find('input').attributes('type')).toBe('text')
+  })
+})

package/src/lib/input/Input.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  type?: string
+  disabled?: boolean
+  placeholder?: string
+  modelValue?: string | number
+  size?: 'sm' | 'default' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  size: 'default',
+})
+
+const sizeClasses = {
+  sm: 'h-8 text-xs',
+  default: 'h-10 text-sm',
+  lg: 'h-12 text-base',
+}
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const slots = useSlots()
+
+const hasLeftIcon = computed(() => !!slots['left-icon'])
+const hasRightIcon = computed(() => !!slots['right-icon'])
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<template>
+  <div class="relative flex items-center w-full">
+    <!-- Left Icon -->
+    <div
+      v-if="hasLeftIcon"
+      class="absolute left-3 flex items-center justify-center text-muted-foreground pointer-events-none"
+    >
+      <slot name="left-icon" />
+    </div>
+
+    <input
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :class="
+        cn(
+          'flex w-full rounded-lg border border-input',
+          'bg-background',
+          sizeClasses[props.size],
+          'ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'shadow-depth-1 focus-visible:shadow-depth-2 transition-all duration-150 ease-out',
+          // Padding adjustments for icons
+          hasLeftIcon && 'pl-10',
+          hasRightIcon && 'pr-10',
+          !hasLeftIcon && 'px-3',
+          !hasRightIcon && !hasLeftIcon && 'py-2',
+          props.class
+        )
+      "
+      :disabled="disabled"
+      @input="handleInput"
+    />
+
+    <!-- Right Icon -->
+    <div
+      v-if="hasRightIcon"
+      class="absolute right-3 flex items-center justify-center text-muted-foreground"
+      :class="{ 'pointer-events-none': !$slots['right-icon-clickable'] }"
+    >
+      <slot name="right-icon" />
+    </div>
+  </div>
+</template>

package/src/lib/input/index.ts

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

package/src/lib/input-group/InputGroup.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex h-10 w-full rounded-md border border-input bg-background text-sm',
+        'ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+        'shadow-depth-1',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>