import { useId } from "@radix-ui/react-id"; import React, { forwardRef, ReactElement, ReactNode, Ref } from "react"; import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form"; import classNames from "@calcom/lib/classNames"; import { getErrorFromUnknown } from "@calcom/lib/errors"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import showToast from "@calcom/ui/v2/core/notifications"; import { Alert } from "../Alert"; 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 (