File size: 1,329 Bytes
1f21206 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | import type { InputHTMLAttributes } from 'react'
type InputProps = InputHTMLAttributes<HTMLInputElement> & {
label?: string
error?: string
required?: boolean
}
export function Input({ label, error, required, className = '', id, ...props }: InputProps) {
const inputId = id || label?.toLowerCase().replace(/\s+/g, '-')
return (
<div className="flex flex-col gap-1">
{label && (
<label htmlFor={inputId} className="text-sm font-medium text-[var(--color-text-primary)]">
{label}
{required && <span className="text-[var(--color-error)] ml-0.5">*</span>}
</label>
)}
<input
id={inputId}
className={`
h-10 px-3 rounded-[var(--radius-md)] border text-sm
bg-[var(--color-surface)] text-[var(--color-text-primary)]
placeholder:text-[var(--color-text-tertiary)]
transition-colors duration-150
${error
? 'border-[var(--color-error)] focus:shadow-[var(--shadow-error-ring)]'
: 'border-[var(--color-border)] focus:border-[var(--color-border-focus)] focus:shadow-[var(--shadow-focus-ring)]'
}
outline-none
${className}
`}
{...props}
/>
{error && <p className="text-xs text-[var(--color-error)]">{error}</p>}
</div>
)
}
|