Text area

import { TextArea } from "@/components/vip-ui/text-area";export function TextAreaBasicDemo() {  return (    <TextArea      label="Project description"      placeholder="What is this project for?"      className="w-full max-w-md"    />  );}

import { TextArea } from "@/components/vip-ui/text-area";export function TextAreaDescriptionDemo() {  return (    <TextArea      label="Feedback"      description="Tell us what to change. We read every message."      placeholder="What can we do better?"      className="w-full max-w-md"    />  );}

import { TextArea } from "@/components/vip-ui/text-area";export function TextAreaDisabledDemo() {  return (    <TextArea      label="Comments"      defaultValue="Comments are closed for this project."      isDisabled      rows={3}      className="w-full max-w-md"    />  );}

import { TextArea } from "@/components/vip-ui/text-area";export function TextAreaReadOnlyDemo() {  return (    <TextArea      label="Release note"      defaultValue="Version 2.4 adds keyboard shortcuts to the editor."      isReadOnly      rows={3}      className="w-full max-w-md"    />  );}

"use client";import { useState } from "react";import {  TextArea,  TextAreaError,  TextAreaInput,  TextAreaLabel,} from "@/components/vip-ui/text-area";export function TextAreaInvalidDemo() {  const [message, setMessage] = useState("Short");  return (    <TextArea      value={message}      onChange={setMessage}      isInvalid={message.trim().length < 10}      className="w-full max-w-md"    >      <TextAreaLabel>Message</TextAreaLabel>      <TextAreaInput rows={3} />      <TextAreaError>Enter at least 10 characters.</TextAreaError>    </TextArea>  );}

import { TextArea } from "@/components/vip-ui/text-area";export function TextAreaSizesDemo() {  return (    <div className="grid w-full max-w-md gap-3">      <TextArea size="sm" aria-label="Comment" placeholder="Add a comment" />      <TextArea aria-label="Comment" placeholder="Add a comment" />      <TextArea size="xl" aria-label="Comment" placeholder="Add a comment" />    </div>  );}