Form

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