Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Pencil from "$icon/pencil"; import Sun from "$icon/sun"; import Textarea from "./Textarea.svelte";
const { Story } = defineMeta({ title: "UI/Textarea", component: Textarea, tags: ["autodocs"], argTypes: { error: { control: "boolean" }, disabled: { control: "boolean" }, loading: { control: "boolean" }, readonly: { control: "boolean" }, resizeable: { control: "boolean" }, placeholder: { control: "text" }, rows: { control: "number" } }, args: { error: false, disabled: false, loading: false, readonly: false, resizeable: false, placeholder: "Placeholder" } });</script>
<Story name="Default" /><Story name="Focus" args={{ autofocus: true, resizeable: false }} /><Story name="Filled" args={{ value: "Some notes go here" }} /><Story name="Error" args={{ error: true, value: "Invalid value" }} /><Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} /><Story name="Read-only" args={{ readonly: true, value: "Read-only content" }} /><Story name="Loading" args={{ loading: true, value: "Checking..." }} /><Story name="With left icon" args={{ iconLeft: Pencil, placeholder: "Write something" }} /><Story name="With right icon" args={{ iconRight: Sun, placeholder: "Write something" }} />
<Story name="States"> <div class="flex w-64 flex-col gap-3"> <Textarea placeholder="Default" /> <Textarea placeholder="Filled" value="Some notes go here" /> <Textarea placeholder="Error" error value="Invalid value" /> <Textarea placeholder="Disabled" disabled value="Can't edit this" /> <Textarea placeholder="Read-only" readonly value="Read-only content" /> <Textarea placeholder="Loading" loading value="Checking..." /> </div></Story>