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>(
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, formState } = useFormContext()
48 
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 
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      className={cn(error && "text-destructive", className)}
99      htmlFor={formItemId}
100      {...props}
101// … truncated