form

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