feat(ui): Textarea component

src/common/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Textarea } from "./Textarea";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Common/Textarea",
+  component: Textarea,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  args: {
+    placeholder: "Input",
+  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    return <Textarea {...args} />;
+  },
+};

src/common/components/Textarea/Textarea.theme.ts

@@ -0,0 +1,38 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+export type TextareaVariants = VariantProps<typeof textareaTheme>;
+
+export const textareaTheme = tv(
+  {
+    slots: {
+      wrapper: [],
+      textarea: [
+        "flex",
+        "items-start",
+        "p-2",
+        "w-80",
+        "max-w-[480px]",
+        "min-h-32",
+        "gap-2",
+        "rounded-lg",
+        "border",
+        "bg-surface-base",
+        "border-border-default",
+        "text-text-em-mid",
+      ],
+    },
+    variants: {
+      size: {
+        md: {
+          wrapper: [],
+          textarea: ["text-base"],
+        },
+        sm: {
+          wrapper: [],
+          textarea: ["text-sm"],
+        },
+      },
+    },
+  },
+  { responsiveVariants: true },
+);

src/common/components/Textarea/Textarea.tsx

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { type TextareaVariants, textareaTheme } from "./Textarea.theme";
+
+export type TextareaProps = ComponentPropsWithoutRef<"textarea"> &
+  TextareaVariants & {
+    placeholder?: string;
+    wrapperProps?: ComponentPropsWithoutRef<"div">;
+  };
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    { placeholder = "Input", size = "md", wrapperProps, className, ...props },
+    ref,
+  ) => {
+    const { wrapper, textarea } = textareaTheme();
+    return (
+      <div
+        className={wrapper({
+          className: wrapperProps?.className,
+          size,
+        })}
+        {...wrapperProps}
+      >
+        <textarea
+          placeholder={placeholder}
+          className={textarea({ className, size })}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+Textarea.displayName = "Textarea";

src/common/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+export * from "./Textarea";
+export * from "./Textarea.theme";