import { InputHTMLAttributes, forwardRef } from 'react';
import { cn } from '../../lib/cn';
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
label?: string;
error?: string;
}
export const Input = forwardRef<HTMLInputElement, InputProps>(
({ className, label, error, ...props }, ref) => {
return (
<div className="space-y-1">
{label && (
<label className="text-sm font-medium text-[rgb(var(--foreground))]">{label}</label>
)}
<input
ref={ref}
className={cn(
'flex h-10 w-full rounded-lg border border-[rgb(var(--border))] bg-[rgb(var(--background))] px-3 py-2 text-sm',
'placeholder:text-[rgb(var(--muted))]',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
'disabled:cursor-not-allowed disabled:opacity-50',
error && 'border-red-500 focus-visible:ring-red-500',
className
)}
{...props}
/>
{error && <p className="text-sm text-red-500">{error}</p>}
</div>
);
}
);
Input.displayName = 'Input';
