import { TextareaBasicDemo } from "../../../src/components/textarea-basic-demo";
import { TextareaSizesDemo } from "../../../src/components/textarea-sizes-demo";
import { TextareaInvalidDemo } from "../../../src/components/textarea-invalid-demo";

## Overview

The Textarea component provides a styled multi-line text input field with support for different sizes, width behaviors, and validation states. It includes automatic styling for focus, disabled, and error states, with proper accessibility attributes.

## Import

```tsx
import { Textarea } from "@px-ui/core";
```

## Usage

<Preview>
  <TextareaBasicDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Textarea placeholder="Enter your message" />
  ```
</CodeBlock>

## Examples

### Sizes

The Textarea component supports two size variants that control the minimum height.

<Preview>
  <TextareaSizesDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Textarea size="sm" placeholder="Small textarea" />
  <Textarea size="default" placeholder="Default textarea" />
  ```
</CodeBlock>

### Invalid State

The Textarea component supports validation states through the `invalid` prop, which applies error styling and sets the appropriate ARIA attributes.

<Preview>
  <TextareaInvalidDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Textarea placeholder="Valid textarea" />
  <Textarea invalid placeholder="Invalid textarea" />
  <Textarea disabled placeholder="Disabled textarea" />
  ```
</CodeBlock>

## API Reference

### Textarea

A styled multi-line text input component with size, width, and validation customization.

| Prop           | Type                   | Default     | Description                                                                  |
| -------------- | ---------------------- | ----------- | ---------------------------------------------------------------------------- |
| `size`         | `"default" \| "sm"`    | `"default"` | Size variant affecting minimum height                                        |
| `widthVariant` | `"enforced" \| "full"` | `"full"`    | Width behavior - enforced uses a fixed minimum width, full stretches to 100% |
| `invalid`      | `boolean`              | `false`     | When true, applies error styling and sets `aria-invalid` attribute           |
| `className`    | `string`               | -           | Additional CSS classes                                                       |

**Inherited Props:** Inherits all props from native HTML `textarea` element including `value`, `onChange`, `placeholder`, `disabled`, `rows`, etc.