Form

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