83 lines
1.8 KiB
TypeScript
83 lines
1.8 KiB
TypeScript
/**
|
|
* 📝 Input Component
|
|
* Componente de input reutilizável com validação
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
error?: string;
|
|
helperText?: string;
|
|
required?: boolean;
|
|
}
|
|
|
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
(
|
|
{
|
|
label,
|
|
error,
|
|
helperText,
|
|
required = false,
|
|
id,
|
|
className = '',
|
|
type = 'text',
|
|
...props
|
|
},
|
|
ref,
|
|
) => {
|
|
const inputId = id || `input-${Math.random()}`;
|
|
|
|
return (
|
|
<div className="w-full">
|
|
{label && (
|
|
<label
|
|
htmlFor={inputId}
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
{label}
|
|
{required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<input
|
|
ref={ref}
|
|
id={inputId}
|
|
type={type}
|
|
className={`
|
|
w-full
|
|
px-4
|
|
py-2
|
|
border
|
|
rounded-lg
|
|
font-base
|
|
focus:outline-none
|
|
focus:ring-2
|
|
focus:ring-offset-2
|
|
transition-colors
|
|
disabled:bg-gray-50
|
|
disabled:text-gray-500
|
|
disabled:cursor-not-allowed
|
|
${
|
|
error
|
|
? 'border-red-500 focus:ring-red-500 focus:border-red-500'
|
|
: 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'
|
|
}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
/>
|
|
|
|
{error && <p className="text-red-500 text-sm mt-1">{error}</p>}
|
|
{helperText && !error && (
|
|
<p className="text-gray-500 text-sm mt-1">{helperText}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
Input.displayName = 'Input';
|
|
|
|
export default Input;
|