refactor: ⬆️ Upgrade to Tailwind v4

components/ui/form/FormControl.vue

@@ -8,6 +8,7 @@ const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 <template>
   <Slot
     :id="formItemId"
+    data-slot="form-control"
     :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
     :aria-invalid="!!error"
   >

components/ui/form/FormDescription.vue

@@ -13,7 +13,8 @@ const { formDescriptionId } = useFormField();
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-sm text-muted-foreground', props.class)"
+    data-slot="form-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
   >
     <slot />
   </p>

components/ui/form/FormItem.vue

@@ -13,7 +13,10 @@ provide(FORM_ITEM_INJECTION_KEY, id);
 </script>
 
 <template>
-  <div :class="cn('space-y-2', props.class)">
+  <div
+    data-slot="form-item"
+    :class="cn('grid gap-2', props.class)"
+  >
     <slot />
   </div>
 </template>

components/ui/form/FormLabel.vue

@@ -12,8 +12,10 @@ const { error, formItemId } = useFormField();
 
 <template>
   <Label
+    data-slot="form-label"
+    :data-error="!!error"
     :class="cn(
-      error && 'text-destructive',
+      'data-[error=true]:text-destructive-foreground',
       props.class,
     )"
     :for="formItemId"

components/ui/form/FormMessage.vue

@@ -1,16 +1,22 @@
 <script lang="ts" setup>
+import { cn } from "@/lib/utils";
 import { ErrorMessage } from "vee-validate";
-import { toValue } from "vue";
+import { type HTMLAttributes, toValue } from "vue";
 import { useFormField } from "./useFormField";
 
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+
 const { name, formMessageId } = useFormField();
 </script>
 
 <template>
   <ErrorMessage
     :id="formMessageId"
+    data-slot="form-message"
     as="p"
     :name="toValue(name)"
-    class="text-sm font-medium text-destructive"
+    :class="cn('text-destructive-foreground text-sm', props.class)"
   />
 </template>

components/ui/form/index.ts

@@ -4,4 +4,8 @@ export { default as FormItem } from "./FormItem.vue";
 export { default as FormLabel } from "./FormLabel.vue";
 export { default as FormMessage } from "./FormMessage.vue";
 export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
-export { Form, Field as FormField } from "vee-validate";
+export {
+    Form,
+    Field as FormField,
+    FieldArray as FormFieldArray,
+} from "vee-validate";