Fix error with inject/provide

apps/www/src/lib/registry/default/ui/form/FormControl.vue

@@ -1,16 +1,35 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue'
+import { Slot } from "radix-vue";
-import { useFormField } from './useFormField'
+import { useFormField } from "./useFormField";
 
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+const props = defineProps<{
+  label?: string;
+  description?: string;
+}>();
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 </script>
 
 <template>
+  <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
+
   <Slot
     :id="formItemId"
-    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-describedby="
+      !error
+        ? `${formDescriptionId}`
+        : props.description
+        ? `${formMessageId}`
+        : `${formDescriptionId} ${formMessageId}`
+    "
     :aria-invalid="!!error"
   >
     <slot />
   </Slot>
+
+  <FormDescription v-if="props.description && !error">
+    {{ props.description }}
+  </FormDescription>
+
+  <FormMessage v-if="props.description" />
 </template>

apps/www/src/lib/registry/default/ui/form/FormItem.vue

@@ -3,30 +3,17 @@ import { cn } from "@/lib/utils";
 import { useId } from "radix-vue";
 import { type HTMLAttributes, provide } from "vue";
 import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
-import { useFormField } from "./useFormField";
 
 const props = defineProps<{
   class?: HTMLAttributes["class"];
-  label?: string;
-  description?: string;
 }>();
 
-const { error } = useFormField();
-
 const id = useId();
 provide(FORM_ITEM_INJECTION_KEY, id);
 </script>
 
 <template>
   <div :class="cn('space-y-2', props.class)">
-    <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
-
     <slot />
-
-    <FormDescription v-if="props.description && !error">
-      {{ props.description }}
-    </FormDescription>
-
-    <FormMessage v-if="props.description" />
   </div>
 </template>

apps/www/src/lib/registry/new-york/ui/form/FormControl.vue

@@ -1,16 +1,35 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue'
+import { Slot } from "radix-vue";
-import { useFormField } from './useFormField'
+import { useFormField } from "./useFormField";
 
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+const props = defineProps<{
+  label?: string;
+  description?: string;
+}>();
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 </script>
 
 <template>
+  <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
+
   <Slot
     :id="formItemId"
-    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-describedby="
+      !error
+        ? `${formDescriptionId}`
+        : props.description
+        ? `${formMessageId}`
+        : `${formDescriptionId} ${formMessageId}`
+    "
     :aria-invalid="!!error"
   >
     <slot />
   </Slot>
+
+  <FormDescription v-if="props.description && !error">
+    {{ props.description }}
+  </FormDescription>
+
+  <FormMessage v-if="props.description" />
 </template>

apps/www/src/lib/registry/new-york/ui/form/FormItem.vue

@@ -3,30 +3,17 @@ import { cn } from "@/lib/utils";
 import { useId } from "radix-vue";
 import { type HTMLAttributes, provide } from "vue";
 import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
-import { useFormField } from "./useFormField";
 
 const props = defineProps<{
   class?: HTMLAttributes["class"];
-  label?: string;
-  description?: string;
 }>();
 
-const { error } = useFormField();
-
 const id = useId();
 provide(FORM_ITEM_INJECTION_KEY, id);
 </script>
 
 <template>
   <div :class="cn('space-y-2', props.class)">
-    <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
-
     <slot />
-
-    <FormDescription v-if="props.description && !error">
-      {{ props.description }}
-    </FormDescription>
-
-    <FormMessage v-if="props.description" />
   </div>
 </template>