form

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