Something went wrong. Try again.
A daily game
Something went wrong. Try again.
3.9 kB · 167 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168"use client"
import * as LabelPrimitive from "@radix-ui/react-label"import { Slot } from "@radix-ui/react-slot"import { Controller, FormProvider, useFormContext, useFormState, type ControllerProps, type FieldPath, type FieldValues,} from "react-hook-form"
import * as React from "react"
import { Label } from "@/components/ui/label"
import { cn } from "@/lib/utils"
const Form = FormProvider
type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,> = { name: TName}
const FormFieldContext = React.createContext<FormFieldContextValue>( {} as FormFieldContextValue,)
function FormField< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,>({ ...props }: ControllerProps<TFieldValues, TName>) { return ( <FormFieldContext.Provider value={{ name: props.name }}> <Controller {...props} /> </FormFieldContext.Provider> )}
const useFormField = () => { const fieldContext = React.useContext(FormFieldContext) const itemContext = React.useContext(FormItemContext) const { getFieldState } = useFormContext() const formState = useFormState({ name: fieldContext.name }) const fieldState = getFieldState(fieldContext.name, formState)
if (!fieldContext) { throw new Error("useFormField should be used within <FormField>") }
const { id } = itemContext
return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, }}
type FormItemContextValue = { id: string}
const FormItemContext = React.createContext<FormItemContextValue>( {} as FormItemContextValue,)
function FormItem({ className, ...props }: React.ComponentProps<"div">) { const id = React.useId()
return ( <FormItemContext.Provider value={{ id }}> <div data-slot="form-item" className={cn("grid gap-2", className)} {...props} /> </FormItemContext.Provider> )}
function FormLabel({ className, ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) { const { error, formItemId } = useFormField()
return ( <Label data-slot="form-label" data-error={!!error} className={cn("font-heading", className)} htmlFor={formItemId} {...props} /> )}
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) { const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return ( <Slot data-slot="form-control" id={formItemId} aria-describedby={ !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}` } aria-invalid={!!error} {...props} /> )}
function FormDescription({ className, ...props }: React.ComponentProps<"p">) { const { formDescriptionId } = useFormField()
return ( <p data-slot="form-description" id={formDescriptionId} className={cn("text-sm font-base text-foreground", className)} {...props} /> )}
function FormMessage({ className, ...props }: React.ComponentProps<"p">) { const { error, formMessageId } = useFormField() const body = error ? String(error?.message ?? "") : props.children
if (!body) { return null }
return ( <p data-slot="form-message" id={formMessageId} className={cn("text-sm font-base text-red-500", className)} {...props} > {body} </p> )}
export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField,}