<!-- source-hash: ec4ed0c801de7134f1ad25648dec0319 -->
A client-side textarea component supporting labels, validation states, and optional end icons (as decorative spans or interactive buttons), built on top of `FieldWrapper`.

## Key Components

### `Textarea`
A `React.forwardRef` component extending native `HTMLTextAreaElement` attributes with the following additional props:

| Prop | Type | Description |
|------|------|-------------|
| `invalid` | `boolean` | Renders red error border/ring |
| `label` | `string` | Label text above the textarea |
| `error` | `string` | Error message below the textarea |
| `endIcon` | `React.ReactNode` | Icon rendered at the right edge |
| `endIconAsButton` | `boolean` | Wraps `endIcon` in a styled `<button>` |
| `endIconButtonProps` | `ButtonHTMLAttributes` | Extra props for the end-icon button |

**Two layout modes:**
- **Without `endIcon`**: Border and background styles live directly on the `<textarea>` element.
- **With `endIcon`**: A `<label>` wrapper hosts the border/background so the icon appears visually inside the field. The textarea uses `[field-sizing:content]` for native CSS auto-grow and caps height at `160px` with internal scroll.

## Usage Example

```typescript
// Basic textarea with label and validation
<Textarea
  label="Message"
  placeholder="Type your message..."
  error="Message is required"
/>

// Auto-growing textarea with a submit button icon
<Textarea
  label="Chat Input"
  placeholder="Ask something..."
  endIcon={<SendIcon />}
  endIconAsButton
  endIconButtonProps={{
    'aria-label': 'Send message',
    onClick: handleSend,
    disabled: isLoading,
  }}
/>

// Controlled with disabled state
<Textarea
  value={value}
  onChange={(e) => setValue(e.target.value)}
  disabled
  rows={4}
/>
```