clean up ui pass 1

src/components/ui/form.tsx

@@ -5,15 +5,16 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
     Controller,
-    ControllerProps,
-    FieldPath,
-    FieldValues,
     FormProvider,
-    useFormContext
+    useFormContext,
+    useFormState,
+    type ControllerProps,
+    type FieldPath,
+    type FieldValues
 } from "react-hook-form";
 
-import { cn } from "@app/lib/cn";
 import { Label } from "@/components/ui/label";
+import { cn } from "@app/lib/cn";
 
 const Form = FormProvider;
 
@@ -44,8 +45,8 @@ const FormField = <
 const useFormField = () => {
     const fieldContext = React.useContext(FormFieldContext);
     const itemContext = React.useContext(FormItemContext);
-    const { getFieldState, formState } = useFormContext();
-
+    const { getFieldState } = useFormContext();
+    const formState = useFormState({ name: fieldContext.name });
     const fieldState = getFieldState(fieldContext.name, formState);
 
     if (!fieldContext) {
@@ -72,47 +73,44 @@ const FormItemContext = React.createContext<FormItemContextValue>(
     {} as FormItemContextValue
 );
 
-const FormItem = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
     const id = React.useId();
 
     return (
         <FormItemContext.Provider value={{ id }}>
-            <div ref={ref} className={cn("space-y-2", className)} {...props} />
+            <div
+                data-slot="form-item"
+                className={cn("grid gap-2", className)}
+                {...props}
+            />
         </FormItemContext.Provider>
     );
-});
-FormItem.displayName = "FormItem";
+}
 
-const FormLabel = React.forwardRef<
-    React.ElementRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
+function FormLabel({
+    className,
+    ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
     const { error, formItemId } = useFormField();
 
     return (
         <Label
-            ref={ref}
-            className={cn(error && "text-destructive", className)}
+            data-slot="form-label"
+            data-error={!!error}
+            className={cn("data-[error=true]:text-destructive", className)}
             htmlFor={formItemId}
             {...props}
         />
     );
-});
-FormLabel.displayName = "FormLabel";
+}
 
-const FormControl = React.forwardRef<
-    React.ElementRef<typeof Slot>,
-    React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
     const { error, formItemId, formDescriptionId, formMessageId } =
         useFormField();
 
     return (
         <Slot
-            ref={ref}
+            data-slot="form-control"
             id={formItemId}
             aria-describedby={
                 !error
@@ -123,32 +121,24 @@ const FormControl = React.forwardRef<
             {...props}
         />
     );
-});
-FormControl.displayName = "FormControl";
+}
 
-const FormDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
     const { formDescriptionId } = useFormField();
 
     return (
         <p
-            ref={ref}
+            data-slot="form-description"
             id={formDescriptionId}
-            className={cn("text-sm text-muted-foreground", className)}
+            className={cn("text-muted-foreground text-sm", className)}
             {...props}
         />
     );
-});
-FormDescription.displayName = "FormDescription";
+}
 
-const FormMessage = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
     const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message) : children;
+    const body = error ? String(error?.message ?? "") : props.children;
 
     if (!body) {
         return null;
@@ -156,16 +146,15 @@ const FormMessage = React.forwardRef<
 
     return (
         <p
-            ref={ref}
+            data-slot="form-message"
             id={formMessageId}
-            className={cn("text-sm font-medium text-destructive", className)}
+            className={cn("text-destructive text-sm", className)}
             {...props}
         >
             {body}
         </p>
     );
-});
-FormMessage.displayName = "FormMessage";
+}
 
 export {
     useFormField,