</div>
      );
    }
    ```
  </Tab>

## Auto Growing

Enable automatic height adjustment based on content.

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Textarea } from '@peppermint-design/devreadykit-custom';

export default function AutoGrowExample() {
      return (
        <Textarea 
          label="Auto-growing textarea"
          placeholder="Type here and watch it grow..."
          autoGrow
          minRows={2}
        />
      );
    }
    ```
  </Tab>

## Validation States

### Error State

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Textarea } from '@peppermint-design/devreadykit-custom';

export default function ErrorExample() {
      return (
        <Textarea 
          label="Message"
          placeholder="Enter your message..."
          errorMessage="Message is required and must be at least 10 characters"
          value="Short"
        />
      );
    }
    ```
  </Tab>

### Disabled State

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Textarea } from '@peppermint-design/devreadykit-custom';

export default function DisabledExample() {
      return (
        <Textarea 
          label="Disabled textarea"
          placeholder="Cannot edit this"
          disabled
          value="This is disabled"
        />
      );
    }
    ```
  </Tab>

### Read Only State

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Textarea } from '@peppermint-design/devreadykit-custom';

export default function ReadOnlyExample() {
      return (
        <Textarea 
          label="Read only textarea"
          placeholder="Cannot edit this"
          readOnly
          value="This is read only"
        />
      );
    }
    ```
  </Tab>

## With Action Button

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Button, Textarea } from '@peppermint-design/devreadykit-custom';

export default function ActionButtonExample() {
      return (
        <Textarea 
          label="Comment"
          placeholder="Write a comment..."
          action={
            <Button size="s" variant="plain">
              Post
            </Button>
          }
        />
      );
    }
    ```
  </Tab>

## Props

## Examples

### Contact Form

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState, type FormEvent } from "react";
    import { Button, Textarea } from '@peppermint-design/devreadykit-custom';

export default function ContactForm() {
      const [message, setMessage] = useState("");
      const [error, setError] = useState("");

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        if (message.trim().length < 10) {
          setError("Message must be at least 10 characters long");
          return;
        }
        setError("");
        // Submit form
      };

return (
        <form onSubmit={handleSubmit}>
          <Textarea
            value={message}
            onValueChange={(value) => {
              setMessage(value);
              if (error && value.trim().length >= 10) {
                setError("");
              }
            }}
            label="Your Message"
            placeholder="Tell us how we can help..."
            helperText="Please provide as much detail as possible"
            errorMessage={error}
            autoGrow
            minRows={4}
            required
          />
          
          <Button type="submit" variant="filled" className="mt-4">
            Send Message
          </Button>
        </form>
      );
    }
    ```
  </Tab>

### Comment System

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { Button, Textarea } from '@peppermint-design/devreadykit-custom';

export default function CommentInput() {
      const [comment, setComment] = useState("");
      const [comments, setComments] = useState<string[]>([]);

const handlePost = () => {
        if (!comment.trim()) return;
        setComments((prev) => [comment.trim(), ...prev]);
        setComment("");
      };

return (
        <div className="space-y-4">
          <Textarea
            value={comment}
            onValueChange={setComment}
            placeholder="Write a comment..."
            autoGrow
            minRows={2}
            action={
              <Button 
                size="s" 
                variant="filled"
                disabled={!comment.trim()}
                onClick={handlePost}
              >
                Post
              </Button>
            }
          />
          <div className="space-y-2">
            {comments.map((entry, index) => (
              <div key={`${entry}-${index}`} className="p-2 border rounded">
                {entry}
              </div>
            ))}
          </div>
        </div>
      );
    }
    ```
  </Tab>

### Feedback Form

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { Textarea } from '@peppermint-design/devreadykit-custom';

const MAX_LENGTH = 500;

export default function FeedbackForm() {
      const [feedback, setFeedback] = useState("");
      const remaining = MAX_LENGTH - feedback.length;
      const isNearLimit = remaining <= 50;

return (
        <div>
          <Textarea
            value={feedback}
            onValueChange={setFeedback}
            label="Feedback"
            placeholder="Share your thoughts..."
            helperText={`${feedback.length}/${MAX_LENGTH} characters`}
            autoGrow
            minRows={3}
            maxLength={MAX_LENGTH}
          />
          
          <div className="mt-2 text-sm text-gray-600 font-mono">
            {isNearLimit && (
              <span className="text-orange-600 font-mono">
                {remaining} characters remaining
              </span>
            )}
          </div>
        </div>
      );
    }
    ```
  </Tab>