Form

1"use client";
2import * as React from "react";
3import {
4	Controller,
5	FormProvider,
6	useFormContext,
7	useFormState,
8} from "react-hook-form";
9 
10import { cn } from "@/registry/optics/lib/utils";
11import { Label } from "@/registry/optics/label";
12 
13const Slot = ({ children, ...props }) => {
14	if (React.isValidElement(children)) {
15		return React.cloneElement(children, {
16			...props,
17			...children.props,
18			className: cn(props.className, children.props.className),
19		});
20	}
21	return null;
22};
23 
24const Form = FormProvider;
25 
26const FormFieldContext = React.createContext({ name: "" });
27 
28const FormField = ({ ...props }) => {
29	return (
30		<FormFieldContext.Provider value={{ name: props.name }}>
31			<Controller {...props} />
32		</FormFieldContext.Provider>
33	);
34};
35 
36const useFormField = () => {
37	const fieldContext = React.useContext(FormFieldContext);
38	const itemContext = React.useContext(FormItemContext);
39	const { getFieldState } = useFormContext();
40	const formState = useFormState({ name: fieldContext.name });
41	const fieldState = getFieldState(fieldContext.name, formState);
42 
43	if (!fieldContext) {
44		throw new Error("useFormField should be used within <FormField>");
45	}
46 
47	const { id } = itemContext;
48 
49	return {
50		id,
51		name: fieldContext.name,
52		formItemId: `${id}-form-item`,
53		formDescriptionId: `${id}-form-item-description`,
54		formMessageId: `${id}-form-item-message`,
55		...fieldState,
56	};
57};
58 
59const FormItemContext = React.createContext({});
60 
61function FormItem({ className = "", ...props }) {
62	const id = React.useId();
63 
64	return (
65		<FormItemContext.Provider value={{ id }}>
66			<div
67				data-slot="form-item"
68				className={cn("grid gap-2", className)}
69				{...props}
70			/>
71		</FormItemContext.Provider>
72	);
73}
74 
75function FormLabel({ className = "", ...props }) {
76	const { error, formItemId } = useFormField();
77 
78	return (
79		<Label
80			data-slot="form-label"
81			data-error={!!error}
82			className={cn("data-[error=true]:text-destructive", className)}
83			htmlFor={formItemId}
84			{...props}
85		/>
86	);
87}
88 
89function FormControl({ render = undefined, ...props }) {
90	const { error, formItemId, formDescriptionId, formMessageId } =
91		useFormField();
92 
93	return (
94		<Slot
95			data-slot="form-control"
96			id={formItemId}
97			aria-describedby={
98				!error
99					? `${formDescriptionId}`
100					: `${formDescriptionId} ${formMessageId}`
101			}
102			aria-invalid={!!error}
103			{...props}
104		/>
105	);
106}
107 
108function FormDescription({ className = "", ...props }) {
109	const { formDescriptionId } = useFormField();
110 
111	return (
112		<p
113// … truncated