Form

1"use client";
2 
3import * as React from "react";
4import { Slot } from "@radix-ui/react-slot";
5import {
6  Controller,
7  ControllerProps,
8  FieldPath,
9  FieldValues,
10  FormProvider,
11  useFormContext,
12} from "react-hook-form";
13 
14import { cn } from "@/lib/utils";
15import { Label } from "@/components/ui/atoms/label";
16 
17const Form = FormProvider;
18 
19type FormFieldContextValue<
20  TFieldValues extends FieldValues = FieldValues,
21  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
22> = {
23  name: TName;
24};
25 
26const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
27 
28const FormField = <
29  TFieldValues extends FieldValues = FieldValues,
30  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
31>({
32  ...props
33}: ControllerProps<TFieldValues, TName>) => {
34  return (
35    <FormFieldContext.Provider value={{ name: props.name }}>
36      <Controller {...props} />
37    </FormFieldContext.Provider>
38  );
39};
40 
41const useFormField = () => {
42  const fieldContext = React.useContext(FormFieldContext);
43  const itemContext = React.useContext(FormItemContext);
44  const { getFieldState, formState } = useFormContext();
45 
46  const fieldState = getFieldState(fieldContext.name, formState);
47 
48  if (!fieldContext) {
49    throw new Error("useFormField should be used within <FormField>");
50  }
51 
52  const { id } = itemContext;
53 
54  return {
55    id,
56    name: fieldContext.name,
57    formItemId: `${id}-form-item`,
58    formDescriptionId: `${id}-form-item-description`,
59    formMessageId: `${id}-form-item-message`,
60    ...fieldState,
61  };
62};
63 
64type FormItemContextValue = {
65  id: string;
66};
67 
68const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
69 
70const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
71  ({ className, ...props }, ref) => {
72    const id = React.useId();
73 
74    return (
75      <FormItemContext.Provider value={{ id }}>
76        <div
77          ref={ref}
78          className={cn(
79            "space-y-2 transition-colors duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]",
80            className,
81          )}
82          {...props}
83        />
84      </FormItemContext.Provider>
85    );
86  },
87);
88FormItem.displayName = "FormItem";
89 
90const FormLabel = React.forwardRef<
91  React.ElementRef<typeof Label>,
92  React.ComponentPropsWithoutRef<typeof Label>
93>(({ className, ...props }, ref) => {
94  const { error, formItemId } = useFormField();
95 
96  return (
97    <Label
98// … truncated