creating TextArea component

packages/docs/src/stories/TextArea.stories.tsx

@@ -0,0 +1,32 @@
+import { Box, Text, TextArea, TextAreaProps } from '@ignite-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types';
+
+export default {
+  title: 'Form/Text Area',
+  component: TextArea,
+  args: {},
+  decorators: [
+    (Story: () => StoryFnReactReturnType) => {
+      return (
+        <Box
+          as="label"
+          css={{ display: 'flex', flexDirection: 'column', gap: '$2' }}
+        >
+          <Text size="sm">Message:</Text>
+          {Story()}
+        </Box>
+      );
+    },
+  ],
+} as Meta<TextAreaProps>;
+
+export const Primary: StoryObj<TextAreaProps> = {};
+
+export const Disabled: StoryObj<TextAreaProps> = {
+  args: {
+    disabled: true,
+    value: '',
+    placeholder: '',
+  },
+};

packages/react/src/components/TextArea.tsx

@@ -0,0 +1,32 @@
+import { ComponentProps } from 'react';
+import { styled } from '../styles';
+
+export const TextArea = styled('textarea', {
+  backgroundColor: '$gray900',
+  borderRadius: '$sm',
+  border: '2px solid $gray900',
+  padding: '$3 $4',
+  boxSizing: 'border-box',
+  color: '$white',
+  fontFamily: '$default',
+  fontWeight: '$regular',
+  fontSize: '$sm',
+  resize: 'vertical',
+  minHeight: '80',
+
+  '&:focus': {
+    outline: 0,
+    borderColor: '$ignite300',
+  },
+
+  '&:disabled': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+
+  '&:placeholder': {
+    color: '$gray400',
+  },
+});
+
+export interface TextAreaProps extends ComponentProps<typeof TextArea> {}

packages/react/src/index.tsx

@@ -4,3 +4,4 @@ export * from './components/Heading';
 export * from './components/Avatar';
 export * from './components/Button';
 export * from './components/TextInput';
+export * from './components/TextArea';