"use client"; import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { Controller, FormProvider, useFormContext } from "react-hook-form"; import { cn } from "@/lib/utils" import { Label } from "@/components/shadcn/ui/label" const Form = FormProvider const FormFieldContext = React.createContext({}) const FormField = ( { ...props } ) => { return ( ( ) ); } const useFormField = () => { const fieldContext = React.useContext(FormFieldContext) const itemContext = React.useContext(FormItemContext) const { getFieldState, formState } = useFormContext() const fieldState = getFieldState(fieldContext.name, formState) if (!fieldContext) { throw new Error("useFormField should be used within ") } const { id } = itemContext return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, } } const FormItemContext = React.createContext({}) const FormItem = React.forwardRef(({ className, ...props }, ref) => { const id = React.useId() return ( (
) ); }) FormItem.displayName = "FormItem" const FormLabel = React.forwardRef(({ className, ...props }, ref) => { const { error, formItemId } = useFormField() return ( (