feat(FormField): wrap error with Presence to be animated

docs/app/components/content/examples/form-field/FormFieldErrorAnimationExample.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { FormError } from '@nuxt/ui'
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const form = useTemplateRef('form')
+
+const validate = (state: any): FormError[] => {
+  const errors = []
+  if (!state.email) errors.push({ name: 'email', message: 'Required' })
+  if (!state.password) errors.push({ name: 'password', message: 'Required' })
+  return errors
+}
+</script>
+
+<template>
+  <UForm ref="form" :validate="validate" :state="state" class="space-y-4">
+    <UFormField
+      label="Email"
+      name="email"
+      :ui="{
+        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
+      }"
+    >
+      <UInput v-model="state.email" />
+    </UFormField>
+
+    <UFormField
+      label="Password"
+      name="password"
+      :ui="{
+        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
+      }"
+    >
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <div class="flex gap-2">
+      <UButton label="Submit" type="submit" color="neutral" />
+
+      <UButton label="Clear" color="neutral" variant="outline" @click="form?.clear()" />
+    </div>
+  </UForm>
+</template>

docs/content/3.components/form-field.md

@@ -170,6 +170,36 @@ slots:
 :u-input{placeholder="Enter your email" class="w-full"}
 ::
 
+## Examples
+
+### With error animation
+
+You can animate the `error` slot by using the `ui` prop.
+
+::component-example
+---
+collapse: true
+name: 'form-field-error-animation-example'
+---
+::
+
+::tip
+You can also configure this globally in your `app.config.ts`:
+
+```ts
+export default defineAppConfig({
+  ui: {
+    formField: {
+      slots: {
+        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
+      }
+    }
+  }
+})
+```
+
+::
+
 ## API
 
 ### Props