mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-17 02:01:29 +10:00
117 lines
3.0 KiB
TypeScript
117 lines
3.0 KiB
TypeScript
import type * as LabelPrimitive from "@radix-ui/react-label";
|
|
import { Slot } from "@radix-ui/react-slot";
|
|
import { FormFieldContext, FormItemContext, useFormField } from "@reactive-resume/hooks";
|
|
import { cn } from "@reactive-resume/utils";
|
|
import { forwardRef, useId } from "react";
|
|
import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
|
|
import { Controller } from "react-hook-form";
|
|
|
|
import { Label } from "./label";
|
|
|
|
export const FormField = <
|
|
TFieldValues extends FieldValues = FieldValues,
|
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
|
>({
|
|
...props
|
|
}: ControllerProps<TFieldValues, TName>) => (
|
|
<FormFieldContext.Provider value={{ name: props.name }}>
|
|
<Controller {...props} />
|
|
</FormFieldContext.Provider>
|
|
);
|
|
|
|
export const FormItem = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
({ className, ...props }, ref) => {
|
|
const id = useId();
|
|
|
|
return (
|
|
<FormItemContext.Provider value={{ id }}>
|
|
<div ref={ref} className={cn("w-full space-y-1", className)} {...props} />
|
|
</FormItemContext.Provider>
|
|
);
|
|
},
|
|
);
|
|
|
|
FormItem.displayName = "FormItem";
|
|
|
|
export const FormLabel = forwardRef<
|
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
|
|
>(({ className, ...props }, ref) => {
|
|
const { error, formItemId } = useFormField();
|
|
|
|
return (
|
|
<Label
|
|
ref={ref}
|
|
htmlFor={formItemId}
|
|
className={cn(error && "text-error", className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
});
|
|
|
|
FormLabel.displayName = "FormLabel";
|
|
|
|
export const FormControl = forwardRef<
|
|
React.ElementRef<typeof Slot>,
|
|
React.ComponentPropsWithoutRef<typeof Slot>
|
|
>(({ ...props }, ref) => {
|
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
|
|
return (
|
|
<Slot
|
|
ref={ref}
|
|
id={formItemId}
|
|
aria-invalid={!!error}
|
|
aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}
|
|
{...props}
|
|
/>
|
|
);
|
|
});
|
|
|
|
FormControl.displayName = "FormControl";
|
|
|
|
export const FormDescription = forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(({ className, ...props }, ref) => {
|
|
const { formDescriptionId } = useFormField();
|
|
|
|
return (
|
|
<p
|
|
ref={ref}
|
|
id={formDescriptionId}
|
|
className={cn("text-xs leading-relaxed opacity-60", className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
});
|
|
|
|
FormDescription.displayName = "FormDescription";
|
|
|
|
export const FormMessage = forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(({ className, children, ...props }, ref) => {
|
|
const { error, formMessageId } = useFormField();
|
|
const body = error ? String(error.message) : children;
|
|
|
|
if (!body) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<p
|
|
ref={ref}
|
|
id={formMessageId}
|
|
className={cn("text-xs font-medium leading-relaxed text-error", className)}
|
|
{...props}
|
|
>
|
|
{body}
|
|
</p>
|
|
);
|
|
});
|
|
|
|
FormMessage.displayName = "FormMessage";
|
|
|
|
export { FormProvider as Form } from "react-hook-form";
|