[docs]: add Textarea docs

apps/docs/src/lib/components/Sidebar.svelte

@@ -143,6 +143,7 @@
 						<li><a href={`${base}/core/number-input`}>NumberInput</a></li>
 						<li><a href={`${base}/core/radio`}>Radio</a></li>
 						<li><a href={`${base}/core/switch`}>Switch</a></li>
+						<li><a href={`${base}/core/textarea`}>Textarea</a></li>
 						<li><a href={`${base}/core/text-input`}>TextInput</a></li>
 						<li><a href={`${base}/core/unstyled-button`}>UnstyledButton</a></li>
 					</ul>

apps/docs/src/lib/data/main/homepage.js

@@ -21,6 +21,8 @@ import {
 	Loader,
 	Code,
 	Text,
+	Textarea,
+	TextInput,
 	Title,
 	Box
 } from '@svelteuidev/core';
@@ -148,6 +150,22 @@ export const components = [
 		color: '$blue600',
 		content: 'Read about me'
 	},
+	{
+		icon: BoxIcon,
+		component: TextInput,
+		link: 'core/text-input',
+		title: 'TextInput',
+		color: '$blue600',
+		content: 'Read about me'
+	},
+	{
+		icon: BoxIcon,
+		component: Textarea,
+		link: 'core/textarea',
+		title: 'Textarea',
+		color: '$blue600',
+		content: 'Read about me'
+	},
 	{
 		icon: BoxIcon,
 		component: NativeSelect,

apps/docs/src/routes/core/textarea/+page.md

@@ -0,0 +1,65 @@
+---
+title: Textarea
+group: 'svelteuidev-core'
+packageGroup: '@svelteuidev/core'
+slug: /core/textarea/
+category: 'inputs'
+description: 'Multiline text input'
+importCode: "import { Textarea } from '@svelteuidev/core';"
+source: 'svelteui-core/src/components/Textarea/Textarea.svelte'
+docs: 'core/textarea'
+---
+
+<script>
+    import { Demo, TextareaDemos } from '@svelteuidev/demos';
+	import { Heading } from "$lib/components";
+</script>
+
+<svelte:head>
+
+  <title>{title} - SvelteUI</title>
+</svelte:head>
+
+<Heading {title} {group} {packageGroup} {slug} {category} {description} {importCode} {source} {docs} />
+
+## Usage
+
+<Demo demo={TextareaDemos.configurator} />
+
+## Bindings
+
+```svelte
+<script>
+	import { Textarea } from '@svelteuidev/core';
+
+	let value = '';
+</script>
+
+<Textarea bind:value />
+```
+
+## Invalid state and error
+
+<Demo demo={TextareaDemos.invalid} />
+
+## Disabled state
+
+<Demo demo={TextareaDemos.disabled} />
+
+## With icon
+
+<Demo demo={TextareaDemos.icon} />
+
+## With right section
+
+<Demo demo={TextareaDemos.rightsection} />
+
+## Accessibility
+
+Provide `aria-label` in case you use component without label for screen reader support:
+
+```svelte
+<Textarea /> // -> not ok, input is not labeled
+<Textarea label="Comment" /> // -> ok, input and label are connected
+<Textarea aria-label="Comment" /> // -> ok, label is not visible but will be announced by screen reader
+```

packages/svelteui-core/src/components/TextArea/TextArea.d.ts

@@ -2,6 +2,6 @@ import type { DefaultProps } from '$lib/styles';
 import { InputProps } from '../Input/Input';
 import { InputWrapperProps } from '../InputWrapper/InputWrapper';
 
-export type TextAreaProps = Omit<InputProps, 'size' | 'type'> &
+export type TextareaProps = Omit<InputProps, 'size' | 'type'> &
 	Omit<InputWrapperProps, 'size'> &
 	DefaultProps<HTMLTextAreaElement>;

packages/svelteui-core/src/components/TextArea/TextArea.stories.svelte

@@ -1,38 +1,38 @@
 <script lang="ts">
 	import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
-	import { TextArea } from './index';
+	import { Textarea } from './index';
 </script>
 
-<Meta title="Components/TextArea" component={TextArea} />
+<Meta title="Components/Textarea" component={Textarea} />
 
 <Template let:args>
-	<TextArea {...args} />
+	<Textarea {...args} />
 </Template>
 
 <Story
 	name="Default"
-	id="TextAreaStory"
+	id="TextareaStory"
 	args={{
-		label: 'Your Story',
+		label: 'Your story',
 		placeholder: 'Once upon a time'
 	}}
 />
 
 <Story
 	name="Description"
-	id="TextAreaDescriptionStory"
+	id="TextareaDescriptionStory"
 	args={{
-		label: 'Your Story',
+		label: 'Your story',
 		description: 'Tell us about yourself',
 		placeholder: 'Once upon a time'
 	}}
 />
 
 <Story
 	name="Resizeable"
-	id="TextAreaResizeableStory"
+	id="TextareaResizeableStory"
 	args={{
-		label: 'Your Story',
+		label: 'Your story',
 		placeholder: 'Once upon a time',
 		rows: 4,
 		resize: 'vertical'
@@ -41,9 +41,9 @@
 
 <Story
 	name="Error"
-	id="TextAreaErrorStory"
+	id="TextareaErrorStory"
 	args={{
-		label: 'Your Story',
+		label: 'Your story',
 		placeholder: 'Once upon a time',
 		error: "That's boring"
 	}}

packages/svelteui-core/src/components/TextArea/TextArea.svelte

@@ -4,9 +4,9 @@
 	import { randomID } from '$lib/styles';
 	import { Input } from '../Input';
 	import { InputWrapper } from '../InputWrapper';
-	import type { TextAreaProps as $$TextAreaProps } from './TextArea';
+	import type { TextareaProps as $$TextareaProps } from './Textarea';
 
-	interface $$Props extends $$TextAreaProps {}
+	interface $$Props extends $$TextareaProps {}
 
 	export let use: $$Props['use'] = [],
 		element: $$Props['element'] = undefined,
@@ -40,12 +40,12 @@
 <!--
 @component
 
-Input for text that spans multiple lines.
+Multiline text input.
 
 @see https://svelteui.org/core/textarea
 @example
     ```tsx
-    <TextArea
+    <Textarea
       label='Comment'
       description="Tell us what's on your mind"
       placeholder='Blah blah blah'

packages/svelteui-core/src/components/TextArea/TextArea.test.ts

@@ -1,8 +1,8 @@
 import { describe } from 'vitest';
 import { itSupportsClassName } from '@svelteuidev/tests';
 
-import { default as TextArea } from './TextArea.svelte';
+import { default as Textarea } from './Textarea.svelte';
 
-describe('TextArea', () => {
-	itSupportsClassName(TextArea);
+describe('Textarea', () => {
+	itSupportsClassName(Textarea);
 });

packages/svelteui-core/src/components/TextArea/index.ts

@@ -1,2 +1,2 @@
-export { default as TextArea } from './TextArea.svelte';
-export type { TextAreaProps } from './TextArea';
+export { default as Textarea } from './Textarea.svelte';
+export type { TextareaProps } from './Textarea';

packages/svelteui-core/src/components/TextInput/TextInput.stories.svelte

@@ -13,15 +13,15 @@
 	name="Default"
 	id="TextInputStory"
 	args={{
-		label: 'Full Name'
+		label: 'Full name'
 	}}
 />
 
 <Story
 	name="Description"
 	id="TextInputDescriptionStory"
 	args={{
-		label: 'Full Name',
+		label: 'Full name',
 		description: 'Tell us your name',
 		placeholder: 'Hanazono Yurine'
 	}}

packages/svelteui-core/src/components/index.ts

@@ -47,7 +47,7 @@ export * from './Stack';
 export * from './Switch';
 export * from './Tabs';
 export * from './Text';
-export * from './TextArea';
+export * from './Textarea';
 export * from './TextInput';
 export * from './ThemeIcon';
 export * from './Timeline';

packages/svelteui-demos/src/demos/core/Textarea/Textarea.demo.configurator.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" context="module">
+	import type { ConfiguratorDemoType, ConfiguratorDemoConfiguration } from '$lib/types';
+
+	const codeTemplate = (props: string) => `
+<script>
+  import { Textarea } from '@svelteuidev/core';
+<\/script>
+
+<Textarea${props}\/>
+`;
+
+	export const type: ConfiguratorDemoType['type'] = 'configurator';
+
+	export const configuration: ConfiguratorDemoConfiguration = {
+		codeTemplate,
+		configurator: [
+			{ name: 'placeholder', type: 'string', initialValue: 'Once upon a time' },
+			{ name: 'label', type: 'string', initialValue: 'Your story' },
+			{ name: 'description', type: 'string' },
+			{ name: 'error', type: 'string' },
+			{
+				name: 'variant',
+				type: 'select',
+				data: [
+					{ label: 'default', value: 'default' },
+					{ label: 'filled', value: 'filled' },
+					{ label: 'unstyled', value: 'unstyled' },
+					{ label: 'headless', value: 'headless' }
+				],
+				initialValue: 'default',
+				defaultValue: 'default'
+			},
+			{
+				name: 'resize',
+				type: 'select',
+				data: [
+					{ label: 'none', value: 'none' },
+					{ label: 'both', value: 'both' },
+					{ label: 'horizontal', value: 'horizontal' },
+					{ label: 'vertical', value: 'vertical' }
+				],
+				initialValue: 'none',
+				defaultValue: 'none'
+			},
+			{ name: 'rows', type: 'number', initialValue: 3, defaultValue: 3, min: 1 },
+			{ name: 'radius', type: 'size', initialValue: 'sm', defaultValue: 'sm' },
+			{ name: 'disabled', type: 'boolean', initialValue: false, defaultValue: false },
+			{ name: 'required', type: 'boolean', initialValue: true, defaultValue: true },
+			{ name: 'invalid', type: 'boolean', initialValue: false, defaultValue: false }
+		],
+		multiline: true
+	};
+</script>
+
+<script lang="ts">
+	import type { TextareaProps } from '@svelteuidev/core';
+	import { Textarea } from '@svelteuidev/core';
+
+	export let props: Partial<TextareaProps> = {};
+</script>
+
+<Textarea {...props} />

packages/svelteui-demos/src/demos/core/Textarea/Textarea.demo.disabled.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `
+<script>
+  import { Textarea } from '@svelteuidev/core';
+<\/script>
+
+<Textarea disabled label="Disabled without value" placeholder="Once upon a time" />
+<Textarea disabled label="Disabled with value" value="Once upon a time in a far away kingdom" />
+`;
+
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code
+	};
+</script>
+
+<script lang="ts">
+	import { Center, Stack, Textarea } from '@svelteuidev/core';
+</script>
+
+<Center>
+	<Stack justify="center">
+		<Textarea disabled label="Disabled without value" placeholder="Once upon a time" />
+		<Textarea disabled label="Disabled with value" value="Once upon a time in a far away kingdom" />
+	</Stack>
+</Center>

packages/svelteui-demos/src/demos/core/Textarea/Textarea.demo.icon.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `
+<script>
+  import { Textarea } from '@svelteuidev/core';
+  import { EnvelopeClosed } from 'radix-icons-svelte';
+<\/script>
+
+<Textarea label="Message" placeholder="Dear John" icon={EnvelopeClosed} />
+`;
+
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code
+	};
+</script>
+
+<script lang="ts">
+	import { Center, Textarea } from '@svelteuidev/core';
+	import { EnvelopeClosed } from 'radix-icons-svelte';
+</script>
+
+<Center>
+	<Textarea label="Message" placeholder="Dear John" icon={EnvelopeClosed} />
+</Center>