docs: update textarea

packages/react-docs/pages/components/textarea/attribute-disabled.js

@@ -0,0 +1,11 @@
+import { Stack, Textarea } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Stack directin="column" spacing="4x">
+    <Textarea disabled placeholder="Placeholder text" />
+    <Textarea disabled placeholder="Placeholder text" defaultValue="Disabled" />
+  </Stack>
+);
+
+export default App;

packages/react-docs/pages/components/textarea/attribute-readonly.js

@@ -0,0 +1,11 @@
+import { Stack, Textarea } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Stack directin="column" spacing="4x">
+    <Textarea readOnly placeholder="Placeholder text" />
+    <Textarea readOnly placeholder="Placeholder text" defaultValue="Read-only" />
+  </Stack>
+);
+
+export default App;

packages/react-docs/pages/components/textarea/attribute-required.js

@@ -0,0 +1,8 @@
+import { Textarea } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Textarea required placeholder="Placeholder text" />
+);
+
+export default App;

packages/react-docs/pages/components/textarea/basic.js

@@ -0,0 +1,12 @@
+import { Text, Textarea, TextLabel } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <>
+    <TextLabel mb="1x">Label:</TextLabel>
+    <Textarea placeholder="Basic example" />
+    <Text size="xs" mt="1x">Help text for the text input</Text>
+  </>
+);
+
+export default App;

packages/react-docs/pages/components/textarea/index.page.mdx

@@ -0,0 +1,78 @@
+# Textarea
+
+The `Textarea` component allows you to create a multi-line text input.
+
+## Import
+
+```js
+import { Textarea } from '@tonic-ui/react';
+```
+
+## Usage
+
+{render('./basic')}
+
+### Sizing
+
+* The `rows` and `cols` properties allow you to specify an exact size for the `<Textarea>` to take. Setting these is a good idea for consistency, as browser defaults can differ.
+* The `maxLength` property specifies a maximum number of characters that the `Textarea` is allowed to contain.
+* The `minLength` property specifies a minimum length that is considered valid. `Textarea` will not submit (and is invalid) if it is empty, using the `required` attribute.
+* The `resize` property to set whether the `Textarea` is resizable, and if so, in which directions. You can set the value to `none`, `both`, `horizontal`, or `vertical`.
+
+{render('./sizing')}
+
+### Variants
+
+The `Textarea` component comes in 3 variants: `outline`, `filled`, and `unstyled`. Pass the `variant` prop and set it to either of these values.
+
+#### `outline`
+
+{render('./variant-outline')}
+
+#### `filled`
+
+{render('./variant-filled')}
+
+#### `unstyled`
+
+{render('./variant-unstyled')}
+
+### Attributes
+
+General form input attributes are supported, such as `disabled`, `readOnly`, `required`, etc.
+
+#### `disabled`
+
+{render('./attribute-disabled')}
+
+#### `readOnly`
+
+{render('./attribute-readonly')}
+
+#### `required`
+
+{render('./attribute-required')}
+
+### Validation
+
+The `Textarea` component provides a built-in validation mechanism that can be used to indicate when a field is not valid. When the `error` prop is set to true, a red border is displayed around the input field, allowing you to provide user-friendly form validation feedback.
+
+In addition to the built-in validation mechanism, you can use the native `setCustomValidity()` method to set a custom validation message for the textarea. This method is available on the textarea element and allows you to set a custom error message that will be displayed when the field is invalid.
+
+{render('./validation')}
+
+## Props
+
+### Textarea
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| rows | number | | Specifies the number of visible lines in a textarea. |
+| cols | number | | Specifies the visible width of a textarea. |
+| maxLength | number | | Specifies the maximum number of characters allowed in the textarea. |
+| minLength | number | | Specifies the minimum number of characters required for the textarea to be considered valid. |
+| resize | string | | The resize behavior of the textarea. One of: 'none', 'both', 'horizontal', 'vertical' |
+| variant | string | 'outline' | The variant of the textarea style to use. One of: 'outline', 'filled', 'unstyled' |
+| disabled | boolean | | If `true`, the textarea is disabled and the user cannot interact with it. |
+| error | boolean | | If `true`, the textarea displays a red border to indicate an error. |
+| readOnly | boolean | | If `true`, the value of the textarea cannot be edited. |

packages/react-docs/pages/components/textarea/sizing.js

@@ -0,0 +1,38 @@
+import { Button, Flex, Space, Stack, Textarea, TextLabel } from '@tonic-ui/react';
+import React, { useState } from 'react';
+
+const App = () => {
+  const [resize, setResize] = useState('both');
+
+  return (
+    <>
+      <Flex alignItems="center" mb="5x">
+        <TextLabel>resize =</TextLabel>
+        <Space width="2x" />
+        <Stack direction="row" spacing="2x">
+          {['none', 'both', 'horizontal', 'vertical'].map(value => (
+            <Button
+              key={value}
+              variant={resize === value ? 'primary' : 'secondary'}
+              onClick={() => setResize(value)}
+            >
+              {value}
+            </Button>
+          ))}
+        </Stack>
+      </Flex>
+      <Textarea
+        defaultValue="Placeholder text"
+        width="auto"
+        resize={resize}
+        rows="3"
+        cols="12"
+        minLength={4}
+        maxLength={16}
+        transition="none"
+      />
+    </>
+  );
+};
+
+export default App;