Textarea

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
5  label?: string
6  error?: string
7}
8 
9const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
10  ({ className, label, error, id, style, ...props }, ref) => {
11    const textareaId = id ?? label?.toLowerCase().replace(/\s+/g, '-')
12 
13    return (
14      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem', width: '100%' }}>
15        {label && (
16          <label
17            htmlFor={textareaId}
18            style={{
19              fontSize:      '0.65rem',
20              color:         error ? 'var(--color-amber)' : 'var(--text-muted)',
21              letterSpacing: '0.12em',
22              textTransform: 'uppercase',
23            }}
24          >
25            {label}
26          </label>
27        )}
28 
29        <textarea
30          ref={ref}
31          id={textareaId}
32          className={cn(
33            'w-full bg-[var(--surface)] font-mono text-[0.8rem]',
34            'border border-[var(--border)]',
35            'text-[var(--text-secondary)]',
36            'placeholder:text-[var(--text-muted)]',
37            'outline-none rounded-none',
38            'transition-all duration-150',
39            'focus:border-[var(--border-active)] focus:shadow-[var(--glow-green)]',
40            'disabled:opacity-40 disabled:cursor-not-allowed',
41            error && 'border-[var(--color-amber)] focus:shadow-[var(--glow-amber)]',
42            className
43          )}
44          style={{
45            padding:    '0.5rem 0.75rem',
46            resize:     'none',
47            caretColor: 'var(--color-green)',
48            minHeight:  '80px',
49            ...style,
50          }}
51          {...props}
52        />
53 
54        {error && (
55          <span
56            style={{
57              fontSize:      '0.65rem',
58              color:         'var(--color-amber)',
59              letterSpacing: '0.06em',
60            }}
61          >
62            ⚠ {error}
63          </span>
64        )}
65      </div>
66    )
67  }
68)
69Textarea.displayName = 'Textarea'
70 
71export { Textarea }