Form

1"use client";
2 
3import * as React from "react";
4import * as LabelPrimitive from "@radix-ui/react-label";
5import { Slot } from "@radix-ui/react-slot";
6import {
7  Controller,
8  FormProvider,
9  useFormContext,
10  type ControllerProps,
11  type FieldPath,
12  type FieldValues,
13} from "react-hook-form";
14 
15import { cn } from "@/lib/utils";
16import { Label } from "@/components/ui/label";
17 
18const Form = FormProvider;
19 
20type FormFieldContextValue<
21  TFieldValues extends FieldValues = FieldValues,
22  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
23> = { name: TName };
24const FormFieldContext = React.createContext<FormFieldContextValue>(
25  {} as FormFieldContextValue,
26);
27 
28function FormField<
29  TFieldValues extends FieldValues = FieldValues,
30  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
31>(props: ControllerProps<TFieldValues, TName>) {
32  return (
33    <FormFieldContext.Provider value={{ name: props.name }}>
34      <Controller {...props} />
35    </FormFieldContext.Provider>
36  );
37}
38 
39const FormItemContext = React.createContext<{ id: string }>({ id: "" });
40 
41function FormItem({ className, ...props }: React.ComponentProps<"div">) {
42  const id = React.useId();
43  return (
44    <FormItemContext.Provider value={{ id }}>
45      <div
46        data-slot="form-item"
47        className={cn("grid gap-2", className)}
48        {...props}
49      />
50    </FormItemContext.Provider>
51  );
52}
53 
54function useFormField() {
55  const fieldContext = React.useContext(FormFieldContext);
56  const itemContext = React.useContext(FormItemContext);
57  const { getFieldState, formState } = useFormContext();
58  if (!fieldContext.name)
59    throw new Error("useFormField must be used within <FormField>");
60  const fieldState = getFieldState(fieldContext.name, formState);
61  return {
62    id: itemContext.id,
63    name: fieldContext.name,
64    formItemId: `${itemContext.id}-form-item`,
65    formDescriptionId: `${itemContext.id}-form-item-description`,
66    formMessageId: `${itemContext.id}-form-item-message`,
67    ...fieldState,
68  };
69}
70 
71function FormLabel({
72  className,
73  ...props
74}: React.ComponentProps<typeof LabelPrimitive.Root>) {
75  const { error, formItemId } = useFormField();
76  return (
77    <Label
78      data-slot="form-label"
79      data-error={!!error}
80      className={cn("data-[error=true]:text-destructive", className)}
81      htmlFor={formItemId}
82      {...props}
83    />
84  );
85}
86 
87function FormControl(props: React.ComponentProps<typeof Slot>) {
88// … truncated