form

1"use client"
2 
3import * as React from "react"
4import * as LabelPrimitive from "@radix-ui/react-label"
5import { Slot } from "@radix-ui/react-slot"
6import {
7  Controller,
8  FormProvider,
9  useFormContext,
10  type ControllerProps,
11  type FieldPath,
12  type FieldValues,
13} from "react-hook-form"
14 
15import { cn } from "@/lib/utils"
16import { Label } from "@/registry/new-york/ui/label"
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 | null>(null)
28 
29const FormField = <
30  TFieldValues extends FieldValues = FieldValues,
31  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
32>({
33  ...props
34}: 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, formState } = useFormContext()
46 
47  if (!fieldContext) {
48    throw new Error("useFormField should be used within <FormField>")
49  }
50 
51  if (!itemContext) {
52    throw new Error("useFormField should be used within <FormItem>")
53  }
54 
55  const fieldState = getFieldState(fieldContext.name, formState)
56 
57  const { id } = itemContext
58 
59  return {
60    id,
61    name: fieldContext.name,
62    formItemId: `${id}-form-item`,
63    formDescriptionId: `${id}-form-item-description`,
64    formMessageId: `${id}-form-item-message`,
65    ...fieldState,
66  }
67}
68 
69type FormItemContextValue = {
70  id: string
71}
72 
73const FormItemContext = React.createContext<FormItemContextValue | null>(null)
74 
75const FormItem = React.forwardRef<
76  HTMLDivElement,
77  React.HTMLAttributes<HTMLDivElement>
78>(({ className, ...props }, ref) => {
79  const id = React.useId()
80 
81  return (
82    <FormItemContext.Provider value={{ id }}>
83      <div ref={ref} className={cn("space-y-2", className)} {...props} />
84    </FormItemContext.Provider>
85  )
86})
87FormItem.displayName = "FormItem"
88 
89const FormLabel = React.forwardRef<
90  React.ElementRef<typeof LabelPrimitive.Root>,
91  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
92>(({ className, ...props }, ref) => {
93  const { error, formItemId } = useFormField()
94 
95  return (
96    <Label
97      ref={ref}
98// … truncated