| import type { TextareaHTMLAttributes } from 'react' |
|
|
| type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & { |
| label?: string |
| error?: string |
| required?: boolean |
| } |
|
|
| export function Textarea({ label, error, required, className = '', id, ...props }: TextareaProps) { |
| 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> |
| )} |
| <textarea |
| id={inputId} |
| className={` |
| min-h-[120px] px-3 py-2 rounded-[var(--radius-lg)] border text-sm resize-y |
| bg-[var(--color-surface)] text-[var(--color-text-primary)] |
| placeholder:text-[var(--color-text-tertiary)] |
| transition-colors duration-150 |
| ${error |
| ? 'border-[var(--color-error)]' |
| : '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> |
| ) |
| } |
|
|
