# TextArea

Renders a multi-line text input field with various styles and states according to the design guidelines.

### **Import**
```tsx
import { TextArea } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';

import { TextArea } from '../TextArea';

export const DefaultArea = () => (
  <TextArea name="comments" placeholder="Enter your thoughts" />
);
```

### **helperText**
Supplementary text displayed below the textarea to provide additional guidance.

- **Type:** `string`

```tsx
import { useState } from 'react';
import React from 'react';

import { Button } from '../../../Button/Button';
import { TextArea } from '../../../Form/TextArea/TextArea';

import { Vertical } from 'app-studio';

export const HelperTextArea = () => {
  const initialValues = {
    guess: '',
  };
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState(initialValues);

  const validate = (values: any) => {
    const errors: any = {};
    if (!values.guess) {
      errors.guess = 'Required';
    }

    setFormErrors(errors);
  };

  const handleChange = (event: any) => {
    setFormValues({ ...formValues, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    validate(formValues);
    if (Object.values(formErrors).length === 0) {
      alert(formValues.guess);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={10}>
        <TextArea
          name="guess"
          placeholder="Write here..."
          helperText={formErrors.guess}
          error={!!formErrors.guess}
          onChange={handleChange}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Vertical>
    </form>
  );
};
```

### **placeholder**
The placeholder text displayed when the textarea is empty.

- **Type:** `string`

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextArea } from '../TextArea';

export const PlaceholderArea = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(formData.get('comment'));
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextArea name="comment" placeholder="Type your comment here..." />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **ColorScheme**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { TextArea } from '../TextArea';

export const ColorArea = () => {
  return (
    <Vertical gap={10}>
      <TextArea name="surname" label="Surname" />
      <TextArea name="name" label="Name" variant="outline" />
    </Vertical>
  );
};
```

### **Default**

```tsx
import React from 'react';

import { TextArea } from '../TextArea';

export const DefaultArea = () => (
  <TextArea name="comments" placeholder="Enter your thoughts" />
);
```

### **DisabledInput**

```tsx
import React from 'react';

import { TextArea } from '../TextArea';

export const DisabledArea = () => {
  return (
    <TextArea
      name="disabled"
      value="Enter your thought"
      label="Thoughts"
      isDisabled
    />
  );
};
```

### **ErrorInput**

```tsx
import { useState } from 'react';
import React from 'react';
import { Button } from '../../../Button/Button';

import { TextArea } from '../../../Form/TextArea/TextArea';

import { Vertical } from 'app-studio';

export const ErrorArea = () => {
  const initialValues = {
    thoughts: '',
  };
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState(initialValues);

  const validate = (values: any) => {
    const errors: any = {};

    if (!values.thoughts) {
      errors.thoughts = 'Required';
    }
    setFormErrors(errors);
  };

  const handleChange = (event: any) => {
    setFormValues({ ...formValues, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    validate(formValues);
    if (Object.values(formErrors).length === 0) {
      alert(formValues.thoughts);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={10}>
        <TextArea
          name="thoughts"
          placeholder="Write your thoughts here..."
          error={!!formErrors.thoughts}
          onChange={handleChange}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Vertical>
    </form>
  );
};
```

### **HelperText**

```tsx
import { useState } from 'react';
import React from 'react';

import { Button } from '../../../Button/Button';
import { TextArea } from '../../../Form/TextArea/TextArea';

import { Vertical } from 'app-studio';

export const HelperTextArea = () => {
  const initialValues = {
    guess: '',
  };
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState(initialValues);

  const validate = (values: any) => {
    const errors: any = {};
    if (!values.guess) {
      errors.guess = 'Required';
    }

    setFormErrors(errors);
  };

  const handleChange = (event: any) => {
    setFormValues({ ...formValues, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    validate(formValues);
    if (Object.values(formErrors).length === 0) {
      alert(formValues.guess);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={10}>
        <TextArea
          name="guess"
          placeholder="Write here..."
          helperText={formErrors.guess}
          error={!!formErrors.guess}
          onChange={handleChange}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Vertical>
    </form>
  );
};
```

### **LabelInput**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextArea } from '../TextArea';

export const LabelArea = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(formData.get('description'));
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextArea name="description" label="Description" />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **MaxRowCol**

```tsx
import React from 'react';

import { TextArea } from '../TextArea';

export const MaxArea = () => {
  return (
    <TextArea name="max" value="Enter your thought" maxRows={5} maxCols={20} />
  );
};
```

### **Placeholder**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextArea } from '../TextArea';

export const PlaceholderArea = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(formData.get('comment'));
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextArea name="comment" placeholder="Type your comment here..." />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **ReadOnlyInput**

```tsx
import React from 'react';

import { TextArea } from '../TextArea';

export const ReadOnlyArea = () => {
  return (
    <TextArea
      name="readOnly"
      value="Almost before we knew it, we had left the ground."
      isReadOnly
    />
  );
};
```

### **ShadowArea**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextArea } from '../TextArea';

export const ShadowArea = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`Hello, ${formData.get('surname')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextArea
          name="surname"
          label="Surname"
          variant="none"
          shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **ShapeInput**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { TextArea } from '../TextArea';
import { Shape } from '../TextArea/TextArea.type';

export const ShapesArea = () => {
  return (
    <Vertical gap={10} width="300px">
      {['default', 'square', 'rounded'].map((shape, index) => (
        <TextArea
          key={index}
          name={shape}
          placeholder={shape}
          shape={shape as Shape}
          variant="outline"
        />
      ))}
    </Vertical>
  );
};
```

### **SizeInput**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { TextArea } from '../TextArea';

export const SizeArea = () => {
  return (
    <Vertical gap={10}>
      <TextArea name="xs" placeholder="xs" size="xs" />
      <TextArea name="sm" placeholder="sm" size="sm" />
      <TextArea name="md" placeholder="md" size="md" />
      <TextArea name="lg" placeholder="lg" size="lg" />
      <TextArea name="xl" placeholder="xl" size="xl" />
    </Vertical>
  );
};
```

### **StylesInput**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextArea } from '../TextArea';

export const StyledArea = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`Hello, ${formData.get('surname')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextArea
          name="surname"
          label="Surname"
          variant="none"
          views={{
            container: {
              borderRadius: 8,
              padding: 5,
              borderColor: 'theme-primary',
              borderStyle: 'solid',
              borderWidth: 1,
            },
            field: { color: 'theme-primary', padding: 0 },
            label: { color: 'theme-primary' },
          }}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **VariantsInputs**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { TextArea } from '../TextArea';
import { Variant } from '../TextArea/TextArea.type';

export const VariantsArea = () => {
  return (
    <Vertical gap={10} width="300px">
      {['default', 'outline', 'none'].map((variant, index) => (
        <TextArea
          key={index}
          name={variant}
          placeholder={variant}
          variant={variant as Variant}
        />
      ))}
    </Vertical>
  );
};
```

### **DesignSystem**

```tsx
/**
 * TextArea Examples - Design System
 *
 * Showcases the TextArea component following the design guidelines:
 * - Typography: Inter/Geist font, specific sizes/weights
 * - Spacing: 4px grid system
 * - Colors: Neutral palette with semantic colors
 * - Rounded corners: Consistent border radius
 * - Transitions: Subtle animations
 */

import React from 'react';
import { TextArea } from '../TextArea';
import { Vertical } from 'app-studio';
import { Text } from 'app-studio';
import { View } from 'app-studio';

export const DesignSystemTextAreas = () => (
  <Vertical gap={24}>
    {/* Size Variants */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Size Variants
      </Text>
      <Vertical gap={16}>
        <TextArea size="xs" placeholder="Extra Small TextArea" />

        <TextArea size="sm" placeholder="Small TextArea" />

        <TextArea size="md" placeholder="Medium TextArea (Default)" />

        <TextArea size="lg" placeholder="Large TextArea" />

        <TextArea size="xl" placeholder="Extra Large TextArea" />
      </Vertical>
    </View>

    {/* Shape Variants */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Shape Variants
      </Text>
      <Vertical gap={16}>
        <TextArea shape="default" placeholder="Default Shape (Rounded)" />

        <TextArea shape="square" placeholder="square Corners" />

        <TextArea shape="rounded" placeholder="Rounded Corners" />
      </Vertical>
    </View>

    {/* Style Variants */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Style Variants
      </Text>
      <Vertical gap={16}>
        <TextArea variant="outline" placeholder="Outline Variant" />

        <TextArea variant="default" placeholder="Default Variant (Underline)" />

        <TextArea
          variant="none"
          placeholder="No Border Variant"
          shadow={{
            boxShadow:
              '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
          }}
        />
      </Vertical>
    </View>

    {/* States */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        States
      </Text>
      <Vertical gap={16}>
        <TextArea placeholder="Default State" />

        <TextArea placeholder="Disabled State" isDisabled />

        <TextArea
          placeholder="Read-only State"
          isReadOnly
          value="This is read-only text that cannot be edited. It demonstrates how the TextArea component appears when in a read-only state."
        />

        <TextArea
          placeholder="Error State"
          error={true}
          //error="This field is required"
        />

        <TextArea
          placeholder="With Helper Text"
          helperText="This is some helpful information about this field"
        />
      </Vertical>
    </View>

    {/* With Labels */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        With Labels
      </Text>
      <Vertical gap={16}>
        <TextArea label="Comments" placeholder="Enter your comments" />

        <TextArea label="Feedback" placeholder="Please provide your feedback" />

        <TextArea label="Description" placeholder="Describe your experience" />
      </Vertical>
    </View>

    {/* Rows and Columns */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Rows and Columns
      </Text>
      <Vertical gap={16}>
        <TextArea label="Small Area" placeholder="2 rows" maxRows={2} />

        <TextArea label="Medium Area" placeholder="4 rows" maxRows={4} />

        <TextArea label="Large Area" placeholder="6 rows" maxRows={6} />
      </Vertical>
    </View>

    {/* Custom Styling */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Custom Styling
      </Text>
      <Vertical gap={16}>
        <TextArea
          placeholder="Primary Theme"
          views={{
            container: {
              borderColor: 'theme-primary',
              borderWidth: '2px',
            },
            label: {
              color: 'theme-primary',
              fontWeight: '600',
            },
            field: {
              color: 'theme-primary',
            },
          }}
        />

        <TextArea
          placeholder="Custom Border Radius"
          views={{
            container: {
              borderRadius: '16px',
              borderColor: 'color-purple-400',
              backgroundColor: 'color-purple-50',
            },
          }}
        />

        <TextArea
          placeholder="Custom Shadow"
          variant="none"
          shadow={{
            boxShadow: '0 4px 14px rgba(0, 0, 0, 0.1)',
          }}
          views={{
            container: {
              borderRadius: '8px',
              backgroundColor: 'color-white',
              transition: 'all 0.3s ease',
              _hover: {
                boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
                transform: 'translateY(-2px)',
              },
            },
          }}
        />
      </Vertical>
    </View>
  </Vertical>
);
```

### **Index**

```tsx
export * from './ColorScheme';
export * from './Default';
export * from './designSystem';
export * from './DisabledInput';
export * from './ErrorInput';
export * from './HelperText';
export * from './LabelInput';
export * from './MaxRowCol';
export * from './Placeholder';
export * from './ReadOnlyInput';
export * from './ShadowArea';
export * from './ShapeInput';
export * from './SizeInput';
export * from './StylesInput';
export * from './VariantsInputs';
```