form

1"use client"
2 
3import { Label } from "@/components/ui/label"
4import { cn } from "@/lib/utils"
5import * as LabelPrimitive from "@radix-ui/react-label"
6import { Slot } from "@radix-ui/react-slot"
7import * as React from "react"
8import {
9  Controller,
10  ControllerProps,
11  FieldPath,
12  FieldValues,
13  FormProvider,
14  useFormContext,
15  useFormState,
16} from "react-hook-form"
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 LabelPrimitive.Root>) {
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-foreground", className)}
100      htmlFor={formItemId}
101      {...props}
102    />
103  )
104}
105 
106// … truncated