Feat/textarea

platforms/metagram/src/lib/ui/Input/Input.stories.ts

@@ -52,11 +52,3 @@ export const Password = {
         placeholder: "Please enter password",
     },
 };
-
-export const Radio = {
-    args: {
-        type: "radio",
-        value: "option1",
-        name: "option-1",
-    },
-};

platforms/metagram/src/lib/ui/Textarea/Textarea.stories.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "svelte";
+import { Textarea } from "..";
+
+export default {
+    title: "UI/Textarea",
+    component: Textarea,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: Textarea;
+        props: ComponentProps<typeof Textarea>;
+    }) => ({
+        Component: Textarea,
+        props: args,
+    }),
+};
+
+export const Primary = {
+    args: {
+        rows: 5,
+        placeholder: "Hey guys...",
+    },
+};

platforms/metagram/src/lib/ui/Textarea/Textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface ITextareaProps extends HTMLAttributes<HTMLTextAreaElement> {
+        name?: string;
+        placeholder?: string;
+        value: string;
+        rows?: number;
+	}
+
+	let {
+        name = '',
+        placeholder = '',
+        value = $bindable(''),
+        rows,
+		...restProps
+	}: ITextareaProps = $props();
+
+	const cBase = 'rounded-xl bg-grey/80 resize-none w-full p-5';
+</script>
+
+<textarea {...restProps} {rows} name={name} id={name} bind:value {placeholder} class={cn([cBase, restProps.class].join(' '))} tabindex="0"></textarea>

platforms/metagram/src/lib/ui/index.ts

@@ -6,3 +6,4 @@ export { default as Label } from "./Label/Label.svelte";
 export { default as Toggle } from "./Toggle/Toggle.svelte";
 export { default as Helper } from "./Helper/Helper.svelte";
 export { default as InputRadio } from "./InputRadio/InputRadio.svelte";
+export { default as Textarea } from "./Textarea/Textarea.svelte";