Implement authentication phase with Cidaas OAuth2 integration

- Add authentication middleware to protect routes
- Create API endpoints for login, logout, registration, and user info
- Develop UI components for login and registration forms
- Integrate VeeValidate for form validation
- Update environment configuration for Cidaas settings
- Add i18n support for English and German languages
- Enhance Tailwind CSS for improved styling of auth components
- Document authentication flow and testing procedures

app/components/Auth/LoginForm.vue

@@ -0,0 +1,69 @@
+<!-- app/components/Auth/LoginForm.vue -->
+
+<script setup lang="ts">
+import { z } from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+const { login } = useAuth()
+
+// Validation schema
+const loginSchema = toTypedSchema(
+  z.object({
+    email: z.string().email('Bitte geben Sie eine gültige E-Mail-Adresse ein'),
+  })
+)
+
+// Form state
+const { handleSubmit, isSubmitting, errors } = useForm({
+  validationSchema: loginSchema,
+})
+
+// Success/error state
+const submitError = ref<string | null>(null)
+
+// Form submit handler
+const onSubmit = handleSubmit(async (values) => {
+  submitError.value = null
+
+  try {
+    await login(values.email)
+    // Redirect happens in login() function
+  } catch (error: any) {
+    console.error('Login error:', error)
+    submitError.value = error.data?.message || 'Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.'
+  }
+})
+</script>
+
+<template>
+  <form @submit="onSubmit" class="space-y-6">
+    <!-- Error Alert -->
+    <Alert v-if="submitError" class="border-destructive bg-destructive/10 text-white">
+      <AlertCircle class="h-5 w-5 text-destructive" />
+      <AlertDescription class="text-white/90">{{ submitError }}</AlertDescription>
+    </Alert>
+
+    <!-- Email Field -->
+    <FormField v-slot="{ componentField }" name="email">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">E-Mail-Adresse</FormLabel>
+        <FormControl>
+          <Input type="email" placeholder="ihre.email@beispiel.de" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Submit Button -->
+    <Button type="submit" variant="experimenta" size="experimenta" class="w-full" :disabled="isSubmitting">
+      <Loader2 v-if="isSubmitting" class="mr-2 h-5 w-5 animate-spin" />
+      {{ isSubmitting ? 'Wird angemeldet...' : 'Anmelden' }}
+    </Button>
+
+    <!-- Info Text -->
+    <p class="text-sm text-white/70 text-center">
+      Sie werden zur sicheren Anmeldeseite weitergeleitet
+    </p>
+  </form>
+</template>

app/components/Auth/RegisterForm.vue

@@ -0,0 +1,151 @@
+<!-- app/components/Auth/RegisterForm.vue -->
+
+<script setup lang="ts">
+import { z } from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+const { register } = useAuth()
+
+// Validation schema
+const registerSchema = toTypedSchema(
+  z.object({
+    email: z.string().email('Bitte geben Sie eine gültige E-Mail-Adresse ein'),
+    password: z
+      .string()
+      .min(8, 'Das Passwort muss mindestens 8 Zeichen lang sein')
+      .regex(/[A-Z]/, 'Das Passwort muss mindestens einen Großbuchstaben enthalten')
+      .regex(/[a-z]/, 'Das Passwort muss mindestens einen Kleinbuchstaben enthalten')
+      .regex(/[0-9]/, 'Das Passwort muss mindestens eine Zahl enthalten'),
+    firstName: z.string().min(2, 'Der Vorname muss mindestens 2 Zeichen lang sein'),
+    lastName: z.string().min(2, 'Der Nachname muss mindestens 2 Zeichen lang sein'),
+  })
+)
+
+// Form state
+const { handleSubmit, isSubmitting } = useForm({
+  validationSchema: registerSchema,
+})
+
+// Success/error state
+const submitError = ref<string | null>(null)
+const submitSuccess = ref(false)
+
+// Form submit handler
+const onSubmit = handleSubmit(async (values) => {
+  submitError.value = null
+  submitSuccess.value = false
+
+  try {
+    const result = await register(values)
+
+    submitSuccess.value = true
+
+    // Show success message for 3 seconds, then switch to login tab
+    setTimeout(() => {
+      navigateTo('/auth?tab=login')
+    }, 3000)
+  } catch (error: any) {
+    console.error('Registration error:', error)
+
+    if (error.status === 409) {
+      submitError.value = 'Diese E-Mail-Adresse ist bereits registriert.'
+    } else {
+      submitError.value = error.data?.message || 'Registrierung fehlgeschlagen. Bitte versuchen Sie es erneut.'
+    }
+  }
+})
+</script>
+
+<template>
+  <form @submit="onSubmit" class="space-y-5">
+    <!-- Success Alert -->
+    <Alert v-if="submitSuccess" class="border-success bg-success/10 text-white">
+      <CheckCircle class="h-5 w-5 text-success" />
+      <AlertTitle class="text-success font-medium">Registrierung erfolgreich!</AlertTitle>
+      <AlertDescription class="text-white/90">
+        Bitte bestätigen Sie Ihre E-Mail-Adresse über den Link, den wir Ihnen gesendet haben.
+      </AlertDescription>
+    </Alert>
+
+    <!-- Error Alert -->
+    <Alert v-if="submitError" class="border-destructive bg-destructive/10 text-white">
+      <AlertCircle class="h-5 w-5 text-destructive" />
+      <AlertDescription class="text-white/90">{{ submitError }}</AlertDescription>
+    </Alert>
+
+    <!-- First Name -->
+    <FormField v-slot="{ componentField }" name="firstName">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">Vorname</FormLabel>
+        <FormControl>
+          <Input
+            type="text"
+            placeholder="Max"
+            v-bind="componentField"
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Last Name -->
+    <FormField v-slot="{ componentField }" name="lastName">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">Nachname</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Mustermann" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Email -->
+    <FormField v-slot="{ componentField }" name="email">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">E-Mail-Adresse</FormLabel>
+        <FormControl>
+          <Input type="email" placeholder="ihre.email@beispiel.de" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Password -->
+    <FormField v-slot="{ componentField }" name="password">
+      <FormItem>
+        <FormLabel class="text-white/90 text-base font-medium">Passwort</FormLabel>
+        <FormControl>
+          <Input
+            type="password"
+            placeholder="Mindestens 8 Zeichen"
+            v-bind="componentField"
+          />
+        </FormControl>
+        <FormDescription class="text-white/60 text-sm">
+          Mindestens 8 Zeichen, Groß-/Kleinbuchstaben und eine Zahl
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Submit Button -->
+    <Button type="submit" variant="experimenta" size="experimenta" class="w-full" :disabled="isSubmitting || submitSuccess">
+      <Loader2 v-if="isSubmitting" class="mr-2 h-5 w-5 animate-spin" />
+      {{ isSubmitting ? 'Wird registriert...' : 'Konto erstellen' }}
+    </Button>
+
+    <!-- Terms & Privacy -->
+    <p class="text-sm text-white/70 text-center">
+      Mit der Registrierung stimmen Sie unserer
+      <a href="/datenschutz" class="text-accent font-medium transition-all duration-300 hover:brightness-125">
+        Datenschutzerklärung
+      </a>
+      und den
+      <a href="/agb" class="text-accent font-medium transition-all duration-300 hover:brightness-125">
+        Nutzungsbedingungen
+      </a>
+      zu.
+    </p>
+  </form>
+</template>

app/components/ui/alert/Alert.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AlertVariants } from '.'
+import { cn } from '~/lib/utils'
+import { alertVariants } from '.'
+
+interface Props {
+  variant?: AlertVariants['variant']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+})
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

app/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

app/components/ui/alert/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

app/components/ui/card/Card.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('rounded-2xl border border-white/20 bg-white/10 backdrop-blur-lg text-white shadow-xl', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardDescription.vue

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

app/components/ui/card/CardHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>

app/components/ui/card/index.ts

@@ -0,0 +1,5 @@
+export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'

app/components/ui/form/FormControl.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { inject } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useFieldError } from 'vee-validate'
+import type { FormItemContext } from '.'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormControl component - Wrapper for form input elements
+ * Provides accessibility attributes and connects to form validation
+ */
+
+interface Props extends PrimitiveProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'div',
+})
+
+// Get the form item context for ID
+const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)
+
+// Get field validation state from the nearest parent field
+const error = useFieldError()
+</script>
+
+<template>
+  <Primitive
+    :id="formItemContext?.id"
+    v-bind="props"
+    :aria-describedby="error ? `${formItemContext?.id}-message` : undefined"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/form/FormDescription.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { inject } from 'vue'
+import { cn } from '~/lib/utils'
+import type { FormItemContext } from '.'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormDescription component - Help text for form fields
+ * Provides additional context or instructions for the user
+ */
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+// Get the form item context for ID
+const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)
+</script>
+
+<template>
+  <p
+    :id="`${formItemContext?.id}-description`"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>

app/components/ui/form/FormField.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Field } from 'vee-validate'
+
+/**
+ * FormField component - Wraps vee-validate Field component
+ * Provides form validation and error handling
+ */
+
+interface Props {
+  name: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <Field v-slot="{ field, errorMessage, meta }" :name="name">
+    <slot :field="field" :error-message="errorMessage" :meta="meta" />
+  </Field>
+</template>

app/components/ui/form/FormItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { provide } from 'vue'
+import { useId } from 'reka-ui'
+import { cn } from '~/lib/utils'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormItem component - Container for form fields with proper spacing
+ * Provides unique ID context for label and error message association
+ */
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+// Generate unique ID for this form item
+const id = useId()
+
+// Provide the ID to child components (FormLabel, FormControl, FormMessage)
+provide(FORM_ITEM_INJECT_KEY, { id })
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/form/FormLabel.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { LabelProps } from 'reka-ui'
+import { inject } from 'vue'
+import { Label } from 'reka-ui'
+import { useFieldError } from 'vee-validate'
+import { cn } from '~/lib/utils'
+import type { FormItemContext } from '.'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormLabel component - Label for form fields with error state styling
+ * Automatically associates with the form control via htmlFor
+ */
+
+interface Props extends LabelProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+// Get the form item context for ID
+const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)
+
+// Get the field error state from the nearest parent field
+const error = useFieldError()
+</script>
+
+<template>
+  <Label
+    :for="formItemContext?.id"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        error && 'text-destructive',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

app/components/ui/form/FormMessage.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { inject } from 'vue'
+import { useFieldError } from 'vee-validate'
+import { cn } from '~/lib/utils'
+import type { FormItemContext } from '.'
+import { FORM_ITEM_INJECT_KEY } from '.'
+
+/**
+ * FormMessage component - Displays validation error messages
+ * Only renders when there is an error for the associated field
+ */
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+// Get the form item context for ID
+const formItemContext = inject<FormItemContext>(FORM_ITEM_INJECT_KEY)
+
+// Get the field error message from the nearest parent field
+const error = useFieldError()
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-all duration-200 ease-out"
+    enter-from-class="opacity-0 -translate-y-1"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition-all duration-150 ease-in"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-1"
+  >
+    <p
+      v-if="error"
+      :id="`${formItemContext?.id}-message`"
+      :class="cn('form-error', props.class)"
+    >
+      {{ error }}
+    </p>
+  </Transition>
+</template>

app/components/ui/form/README.md

@@ -0,0 +1,118 @@
+# Form Components
+
+shadcn-nuxt Form components with VeeValidate integration.
+
+## Components
+
+- **FormField** - Wraps vee-validate Field component for validation
+- **FormItem** - Container for form fields with proper spacing
+- **FormLabel** - Label with error state styling
+- **FormControl** - Wrapper for input elements with accessibility
+- **FormMessage** - Error message display with animations
+- **FormDescription** - Help text for form fields
+
+## Usage Example
+
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  FormDescription,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+
+const formSchema = toTypedSchema(
+  z.object({
+    email: z.string().email('Please enter a valid email'),
+    password: z.string().min(8, 'Password must be at least 8 characters'),
+  })
+)
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = form.handleSubmit((values) => {
+  console.log('Form submitted:', values)
+})
+</script>
+
+<template>
+  <form @submit="onSubmit" class="space-y-6">
+    <!-- Email Field -->
+    <FormField v-slot="{ field }" name="email">
+      <FormItem>
+        <FormLabel>Email</FormLabel>
+        <FormControl>
+          <Input
+            type="email"
+            placeholder="you@example.com"
+            v-bind="field"
+          />
+        </FormControl>
+        <FormDescription>
+          We'll never share your email with anyone else.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <!-- Password Field -->
+    <FormField v-slot="{ field }" name="password">
+      <FormItem>
+        <FormLabel>Password</FormLabel>
+        <FormControl>
+          <Input
+            type="password"
+            placeholder="Enter your password"
+            v-bind="field"
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">Submit</Button>
+  </form>
+</template>
+```
+
+## Features
+
+- **VeeValidate Integration** - Full validation support with error messages
+- **Accessibility** - Proper ARIA attributes and label associations
+- **Error State** - Automatic error styling for labels and inputs
+- **Animations** - Smooth transitions for error messages
+- **TypeScript** - Full type safety
+- **Responsive** - Mobile-first design
+
+## Input Variants
+
+The Input component supports multiple variants and sizes:
+
+```vue
+<!-- Default -->
+<Input v-model="value" />
+
+<!-- Error state -->
+<Input v-model="value" variant="error" />
+
+<!-- Sizes -->
+<Input v-model="value" size="sm" />
+<Input v-model="value" size="default" />
+<Input v-model="value" size="lg" />
+
+<!-- Types -->
+<Input type="text" />
+<Input type="email" />
+<Input type="password" />
+<Input type="number" />
+```

app/components/ui/form/index.ts

@@ -0,0 +1,13 @@
+export { default as FormField } from './FormField.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormControl } from './FormControl.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { default as FormDescription } from './FormDescription.vue'
+
+// Inject keys for form field context
+export const FORM_ITEM_INJECT_KEY = Symbol('form-item-inject-key')
+
+export interface FormItemContext {
+  id: string
+}

app/components/ui/input/Input.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue'
+import type { InputVariants } from '.'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+import { inputVariants } from '.'
+
+/**
+ * Input component - Text input field with variants and two-way binding
+ * Supports all native input attributes and custom styling variants
+ */
+
+interface Props {
+  /** The input value */
+  modelValue?: string | number
+  /** Input type (text, email, password, etc.) */
+  type?: InputHTMLAttributes['type']
+  /** Placeholder text */
+  placeholder?: string
+  /** Whether the input is disabled */
+  disabled?: boolean
+  /** Whether the input is required */
+  required?: boolean
+  /** Input name attribute */
+  name?: string
+  /** Input ID attribute */
+  id?: string
+  /** Autocomplete attribute */
+  autocomplete?: string
+  /** Input variant */
+  variant?: InputVariants['variant']
+  /** Input size */
+  size?: InputVariants['size']
+  /** Custom CSS class */
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  variant: 'default',
+  size: 'default',
+})
+
+const emits = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+// Two-way binding support using computed property
+const modelValue = computed({
+  get: () => props.modelValue ?? '',
+  set: (value) => emits('update:modelValue', value),
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :type="type"
+    :class="cn(inputVariants({ variant, size }), props.class)"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :required="required"
+    :name="name"
+    :id="id"
+    :autocomplete="autocomplete"
+  />
+</template>

app/components/ui/input/README.md

@@ -0,0 +1,139 @@
+# Input Component
+
+shadcn-nuxt Input component with TypeScript support and variants.
+
+## Features
+
+- **Two-way binding** - Full v-model support
+- **Variants** - Default and error states
+- **Sizes** - Small, default, and large
+- **TypeScript** - Full type safety
+- **All HTML input types** - text, email, password, number, etc.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Input } from '@/components/ui/input'
+
+const email = ref('')
+</script>
+
+<template>
+  <Input v-model="email" type="email" placeholder="Enter your email" />
+</template>
+```
+
+## With VeeValidate Form
+
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+const formSchema = toTypedSchema(
+  z.object({
+    email: z.string().email('Please enter a valid email'),
+  })
+)
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+</script>
+
+<template>
+  <form @submit="form.handleSubmit((values) => console.log(values))">
+    <FormField v-slot="{ field }" name="email">
+      <FormItem>
+        <FormLabel>Email</FormLabel>
+        <FormControl>
+          <Input
+            v-bind="field"
+            type="email"
+            placeholder="you@example.com"
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+  </form>
+</template>
+```
+
+## Variants
+
+```vue
+<!-- Default -->
+<Input v-model="value" />
+
+<!-- Error state (use with form validation) -->
+<Input v-model="value" variant="error" />
+```
+
+## Sizes
+
+```vue
+<!-- Small -->
+<Input v-model="value" size="sm" />
+
+<!-- Default -->
+<Input v-model="value" size="default" />
+
+<!-- Large -->
+<Input v-model="value" size="lg" />
+```
+
+## Input Types
+
+```vue
+<!-- Text (default) -->
+<Input v-model="text" type="text" />
+
+<!-- Email -->
+<Input v-model="email" type="email" />
+
+<!-- Password -->
+<Input v-model="password" type="password" />
+
+<!-- Number -->
+<Input v-model="age" type="number" />
+
+<!-- Date -->
+<Input v-model="date" type="date" />
+
+<!-- Search -->
+<Input v-model="query" type="search" />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| modelValue | string \| number | undefined | The input value |
+| type | string | 'text' | HTML input type |
+| placeholder | string | undefined | Placeholder text |
+| disabled | boolean | false | Disable the input |
+| required | boolean | false | Mark as required |
+| name | string | undefined | Input name attribute |
+| id | string | undefined | Input ID attribute |
+| autocomplete | string | undefined | Autocomplete attribute |
+| variant | 'default' \| 'error' | 'default' | Visual variant |
+| size | 'sm' \| 'default' \| 'lg' | 'default' | Input size |
+| class | string | undefined | Additional CSS classes |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | string \| number | Emitted when value changes |

app/components/ui/input/index.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Input } from './Input.vue'
+
+export const inputVariants = cva(
+  'flex w-full rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-base text-white ring-offset-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-white/50 transition-all duration-300 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: '',
+        error: 'border-destructive focus-visible:ring-destructive',
+      },
+      size: {
+        default: 'h-12',
+        sm: 'h-10 text-sm px-3 py-2',
+        lg: 'h-14 text-lg px-5 py-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export type InputVariants = VariantProps<typeof inputVariants>

app/components/ui/tabs/Tabs.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

app/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { TabsContent, useForwardProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+
+interface Props extends TabsContentProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsContent
+    v-bind="forwarded"
+    :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>

app/components/ui/tabs/TabsList.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { TabsList, useForwardProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+
+interface Props extends TabsListProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsList
+    v-bind="forwarded"
+    :class="
+      cn(
+        'inline-flex h-12 items-center justify-center rounded-xl bg-white/5 p-1.5 text-white/70',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

app/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { TabsTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+
+interface Props extends TabsTriggerProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwarded"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-base font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsTrigger>
+</template>

app/components/ui/tabs/index.ts

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