import { useId } from "@radix-ui/react-id"; import type { ReactElement, ReactNode, Ref } from "react"; import React, { forwardRef } from "react"; import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form"; import { FormProvider, useFormContext } from "react-hook-form"; import classNames from "@calcom/lib/classNames"; import { getErrorFromUnknown } from "@calcom/lib/errors"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Alert, showToast } from "../"; type InputProps = Omit & { name: string }; export const Input = forwardRef(function Input(props, ref) { return ( ); }); export function Label(props: JSX.IntrinsicElements["label"]) { return ( ); } export function InputLeading(props: JSX.IntrinsicElements["div"]) { return ( {props.children} ); } type InputFieldProps = { label?: ReactNode; hint?: ReactNode; addOnLeading?: ReactNode; } & React.ComponentProps & { labelProps?: React.ComponentProps; }; const InputField = forwardRef(function InputField(props, ref) { const id = useId(); const { t } = useLocale(); const methods = useFormContext(); const { label = t(props.name), labelProps, placeholder = t(`${props.name}_placeholder`) !== `${props.name}_placeholder` ? t(`${props.name}_placeholder`) : "", className, addOnLeading, hint, ...passThrough } = props; return (
{!!props.name && ( )} {addOnLeading ? (
{addOnLeading}
) : ( )} {hint} {methods?.formState?.errors[props.name]?.message && ( {methods.formState.errors[props.name]?.message}} /> )}
); }); export const TextField = forwardRef(function TextField(props, ref) { return ; }); export const PasswordField = forwardRef(function PasswordField( props, ref ) { return ( ); }); export const EmailInput = forwardRef(function EmailInput(props, ref) { return ( ); }); export const EmailField = forwardRef(function EmailField(props, ref) { return ( ); }); type TextAreaProps = Omit & { name: string }; export const TextArea = forwardRef(function TextAreaInput(props, ref) { return (