50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { Label } from './Typography';
|
|
|
|
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
label?: string;
|
|
error?: string;
|
|
helperText?: string;
|
|
inputSize?: 'sm' | 'md' | 'lg';
|
|
icon?: React.ComponentType<{ className?: string }>;
|
|
}
|
|
|
|
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|
({ label, error, helperText, inputSize = 'md', className, id, ...props }, ref) => {
|
|
const sizeClasses = {
|
|
sm: 'px-3 py-2 text-sm',
|
|
md: 'px-3 py-3 text-base',
|
|
lg: 'px-4 py-4 text-lg'
|
|
};
|
|
|
|
const inputClasses = clsx(
|
|
'w-full border rounded-lg transition-all duration-200 focus:outline-none focus:ring-2',
|
|
sizeClasses[inputSize],
|
|
error
|
|
? 'border-red-300 focus:border-red-500 focus:ring-red-500'
|
|
: 'border-gray-300 dark:border-gray-600 focus:border-primary-500 focus:ring-primary-500',
|
|
'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100',
|
|
'placeholder-gray-500 dark:placeholder-gray-400',
|
|
className
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
{label && <Label htmlFor={id}>{label}</Label>}
|
|
<input
|
|
ref={ref}
|
|
id={id}
|
|
className={inputClasses}
|
|
{...props}
|
|
/>
|
|
{helperText && !error && (
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">{helperText}</p>
|
|
)}
|
|
{error && (
|
|
<p className="text-xs text-red-600 dark:text-red-400">{error}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
);
|