"use client"; import * as React from "react"; import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form"; import { cn } from "@/registry/optics/lib/utils"; import { Label } from "@/registry/optics/label"; const Slot = ({ children, ...props }) => { if (React.isValidElement(children)) { return React.cloneElement(children, { ...props, ...children.props, className: cn(props.className, children.props.className), }); } return null; }; const Form = FormProvider; const FormFieldContext = React.createContext({ name: "" }); const FormField = ({ ...props }) => { return ( ); }; 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 "); } 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({}); function FormItem({ className = "", ...props }) { const id = React.useId(); return (

); } function FormLabel({ className = "", ...props }) { const { error, formItemId } = useFormField(); return ( ); } function FormControl({ render = undefined, ...props }) { const { error, formItemId, formDescriptionId, formMessageId } = useFormField(); return ( ); } function FormDescription({ className = "", ...props }) { const { formDescriptionId } = useFormField(); return (

); } function FormMessage({ className = "", children = null, ...props }) { const { error, formMessageId } = useFormField(); const body = error ? String(error?.message ?? "") : children; if (!body) { return null; } return (

{body}

); } Form.displayName = "Form"; FormItem.displayName = "FormItem"; FormLabel.displayName = "FormLabel"; FormControl.displayName = "FormControl"; FormDescription.displayName = "FormDescription"; FormMessage.displayName = "FormMessage"; FormField.displayName = "FormField"; export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };