From b71f0a7dea2fb068bd5946003decacd1720c6b79 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Fri, 10 Oct 2025 12:37:52 -0600
Subject: [PATCH] Text area component with storybook and testing

---
 app/components/Input.js                       |  15 +-
 app/components/Select.js                      |  16 +-
 app/components/TextArea.js                    | 190 ++++++++++++
 app/forms/page.js                             | 125 ++------
 stories/TextArea.stories.js                   | 286 ++++++++++++++++++
 tests/accessibility/TextArea.a11y.test.jsx    | 121 ++++++++
 .../integration/TextArea.integration.test.jsx | 280 +++++++++++++++++
 tests/unit/TextArea.test.jsx                  | 203 +++++++++++++
 8 files changed, 1126 insertions(+), 110 deletions(-)
 create mode 100644 app/components/TextArea.js
 create mode 100644 stories/TextArea.stories.js
 create mode 100644 tests/accessibility/TextArea.a11y.test.jsx
 create mode 100644 tests/integration/TextArea.integration.test.jsx
 create mode 100644 tests/unit/TextArea.test.jsx

diff --git a/app/components/Input.js b/app/components/Input.js
index 6402244..5afeee7 100644
--- a/app/components/Input.js
+++ b/app/components/Input.js
@@ -59,7 +59,7 @@ const Input = forwardRef(
         return {
           input:
             "bg-[var(--color-content-default-secondary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] cursor-not-allowed",
-          label: "text-[var(--color-content-default-primary)]",
+          label: "text-[var(--color-content-default-secondary)]",
         };
       }
 
@@ -67,7 +67,7 @@ const Input = forwardRef(
         return {
           input:
             "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-utility-negative)]",
-          label: "text-[var(--color-content-default-primary)]",
+          label: "text-[var(--color-content-default-secondary)]",
         };
       }
 
@@ -76,25 +76,25 @@ const Input = forwardRef(
           return {
             input:
               "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)]",
-            label: "text-[var(--color-content-default-primary)]",
+            label: "text-[var(--color-content-default-secondary)]",
           };
         case "hover":
           return {
             input:
               "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
-            label: "text-[var(--color-content-default-primary)]",
+            label: "text-[var(--color-content-default-secondary)]",
           };
         case "focus":
           return {
             input:
               "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-utility-info)] shadow-[0_0_5px_3px_#3281F8]",
-            label: "text-[var(--color-content-default-primary)]",
+            label: "text-[var(--color-content-default-secondary)]",
           };
         default:
           return {
             input:
               "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
-            label: "text-[var(--color-content-default-primary)]",
+            label: "text-[var(--color-content-default-secondary)]",
           };
       }
     };
@@ -153,8 +153,7 @@ const Input = forwardRef(
         {label && (
           <label
             htmlFor={inputId}
-            className={`${labelClasses} font-inter font-medium`}
-            style={{ color: "var(--color-content-default-secondary)" }}
+            className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
           >
             {label}
           </label>
diff --git a/app/components/Select.js b/app/components/Select.js
index 1564884..9db18b0 100644
--- a/app/components/Select.js
+++ b/app/components/Select.js
@@ -133,14 +133,14 @@ const Select = forwardRef(
         return {
           select:
             "bg-[var(--color-content-default-secondary)] border-[var(--color-border-default-tertiary)] cursor-not-allowed opacity-40",
-          label: "text-[var(--color-content-default-primary)]",
+          label: "text-[var(--color-content-default-secondary)]",
         };
       }
 
       if (error) {
         return {
           select: "border-[var(--color-border-default-utility-negative)]",
-          label: "text-[var(--color-content-default-primary)]",
+          label: "text-[var(--color-content-default-secondary)]",
         };
       }
 
@@ -149,18 +149,18 @@ const Select = forwardRef(
           return {
             select:
               "border-[var(--color-border-default-tertiary)] shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
-            label: "text-[var(--color-content-default-primary)]",
+            label: "text-[var(--color-content-default-secondary)]",
           };
         case "focus":
           return {
             select:
               "border-[var(--color-border-default-utility-info)] shadow-[0_0_5px_3px_#3281F8]",
-            label: "text-[var(--color-content-default-primary)]",
+            label: "text-[var(--color-content-default-secondary)]",
           };
         default:
           return {
             select: "border-[var(--color-border-default-tertiary)]",
-            label: "text-[var(--color-content-default-primary)]",
+            label: "text-[var(--color-content-default-secondary)]",
           };
       }
     };
@@ -244,7 +244,11 @@ const Select = forwardRef(
     return (
       <div className={containerClasses}>
         {label && (
-          <label id={labelId} htmlFor={selectId} className={labelClasses}>
+          <label
+            id={labelId}
+            htmlFor={selectId}
+            className={`${labelClasses} text-[var(--color-content-default-secondary)]`}
+          >
             {label}
           </label>
         )}
diff --git a/app/components/TextArea.js b/app/components/TextArea.js
new file mode 100644
index 0000000..2d61a93
--- /dev/null
+++ b/app/components/TextArea.js
@@ -0,0 +1,190 @@
+"use client";
+
+import React, { memo, useCallback, forwardRef, useId } from "react";
+
+const TextArea = forwardRef(
+  (
+    {
+      size = "medium",
+      labelVariant = "default",
+      state = "default",
+      disabled = false,
+      error = false,
+      label,
+      placeholder,
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      id,
+      name,
+      className = "",
+      rows,
+      ...props
+    },
+    ref
+  ) => {
+    // Generate unique ID for accessibility if not provided
+    const generatedId = useId();
+    const textareaId = id || `textarea-${generatedId}`;
+
+    // Size variants with specific heights and radius for TextArea
+    const sizeStyles = {
+      small: {
+        textarea:
+          labelVariant === "horizontal"
+            ? "h-[60px] px-[12px] py-[8px] text-[10px]"
+            : "h-[60px] px-[12px] py-[8px] text-[10px]",
+        label: "text-[12px] leading-[14px] font-medium",
+        container: "gap-[4px]",
+        radius: "var(--measures-radius-xsmall)",
+      },
+      medium: {
+        textarea:
+          labelVariant === "horizontal"
+            ? "h-[110px] px-[12px] py-[8px] text-[14px] leading-[20px]"
+            : "h-[100px] px-[12px] py-[8px] text-[14px] leading-[20px]",
+        label: "text-[14px] leading-[16px] font-medium",
+        container: "gap-[8px]",
+        radius: "var(--measures-radius-xsmall)",
+      },
+      large: {
+        textarea: "h-[150px] px-[12px] py-[8px] text-[16px] leading-[24px]",
+        label: "text-[16px] leading-[20px] font-medium",
+        container: "gap-[12px]",
+        radius: "var(--measures-radius-small)",
+      },
+    };
+
+    // State styles
+    const getStateStyles = () => {
+      if (disabled) {
+        return {
+          textarea:
+            "bg-[var(--color-content-default-secondary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] cursor-not-allowed",
+          label: "text-[var(--color-content-default-secondary)]",
+        };
+      }
+
+      if (error) {
+        return {
+          textarea:
+            "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-utility-negative)]",
+          label: "text-[var(--color-content-default-secondary)]",
+        };
+      }
+
+      switch (state) {
+        case "active":
+          return {
+            textarea:
+              "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)]",
+            label: "text-[var(--color-content-default-secondary)]",
+          };
+        case "hover":
+          return {
+            textarea:
+              "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
+            label: "text-[var(--color-content-default-secondary)]",
+          };
+        case "focus":
+          return {
+            textarea:
+              "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-utility-info)] shadow-[0_0_5px_3px_#3281F8]",
+            label: "text-[var(--color-content-default-secondary)]",
+          };
+        default:
+          return {
+            textarea:
+              "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
+            label: "text-[var(--color-content-default-secondary)]",
+          };
+      }
+    };
+
+    const stateStyles = getStateStyles();
+    const currentSize = sizeStyles[size];
+
+    // Container classes based on label variant
+    const containerClasses =
+      labelVariant === "horizontal"
+        ? `flex items-center gap-[12px]`
+        : `flex flex-col ${currentSize.container}`;
+
+    const labelClasses =
+      labelVariant === "horizontal"
+        ? `${currentSize.label} font-inter min-w-fit`
+        : `${currentSize.label} font-inter`;
+
+    const textareaClasses = `
+       w-full border transition-all duration-200 ease-in-out
+       focus:outline-none focus:ring-0 resize-none
+       ${currentSize.textarea}
+       ${stateStyles.textarea}
+       ${className}
+     `.trim();
+
+    const handleChange = useCallback(
+      (e) => {
+        if (!disabled && onChange) {
+          onChange(e);
+        }
+      },
+      [disabled, onChange]
+    );
+
+    const handleFocus = useCallback(
+      (e) => {
+        if (!disabled && onFocus) {
+          onFocus(e);
+        }
+      },
+      [disabled, onFocus]
+    );
+
+    const handleBlur = useCallback(
+      (e) => {
+        if (!disabled && onBlur) {
+          onBlur(e);
+        }
+      },
+      [disabled, onBlur]
+    );
+
+    return (
+      <div className={containerClasses}>
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
+          >
+            {label}
+          </label>
+        )}
+        <div className={disabled ? "opacity-40" : ""}>
+          <textarea
+            ref={ref}
+            id={textareaId}
+            name={name}
+            value={value}
+            placeholder={placeholder}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            rows={rows}
+            className={textareaClasses}
+            style={{ borderRadius: currentSize.radius }}
+            aria-disabled={disabled}
+            aria-invalid={error}
+            {...props}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+TextArea.displayName = "TextArea";
+
+export default memo(TextArea);
diff --git a/app/forms/page.js b/app/forms/page.js
index ae7a731..9de3f8b 100644
--- a/app/forms/page.js
+++ b/app/forms/page.js
@@ -1,11 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import Select from "../components/Select";
-import ContextMenu from "../components/ContextMenu";
-import ContextMenuItem from "../components/ContextMenuItem";
-import ContextMenuSection from "../components/ContextMenuSection";
-import ContextMenuDivider from "../components/ContextMenuDivider";
+import TextArea from "../components/TextArea";
 
 export default function FormsPlayground() {
   const [smallValue, setSmallValue] = useState("");
@@ -23,157 +19,94 @@ export default function FormsPlayground() {
       <h1 className="font-bricolage text-[24px]">Forms Playground</h1>
 
       <section className="space-y-[12px]">
-        <h2 className="font-space text-[18px]">Select Examples</h2>
+        <h2 className="font-space text-[18px]">TextArea Examples</h2>
         <div className="max-w-[520px] space-y-[16px]">
           <div>
             <h3 className="font-space text-[14px] mb-[8px]">Sizes</h3>
             <div className="space-y-[12px]">
-              <Select
+              <TextArea
                 label="Small"
                 size="small"
                 value={smallValue}
                 onChange={(e) => setSmallValue(e.target.value)}
-                placeholder="Select"
-              >
-                <option value="item1">Context Menu Item 1</option>
-                <option value="item2">Context Menu Item 2</option>
-                <option value="item3">Context Menu Item 3</option>
-              </Select>
-              <Select
+                placeholder="Enter text..."
+              />
+              <TextArea
                 label="Medium"
                 size="medium"
                 value={mediumValue}
                 onChange={(e) => setMediumValue(e.target.value)}
-                placeholder="Select"
-              >
-                <option value="item1">Context Menu Item 1</option>
-                <option value="item2">Context Menu Item 2</option>
-                <option value="item3">Context Menu Item 3</option>
-              </Select>
-              <Select
+                placeholder="Enter text..."
+              />
+              <TextArea
                 label="Large"
                 size="large"
                 value={largeValue}
                 onChange={(e) => setLargeValue(e.target.value)}
-                placeholder="Select"
-              >
-                <option value="item1">Context Menu Item 1</option>
-                <option value="item2">Context Menu Item 2</option>
-                <option value="item3">Context Menu Item 3</option>
-              </Select>
+                placeholder="Enter text..."
+              />
             </div>
           </div>
 
           <div>
             <h3 className="font-space text-[14px] mb-[8px]">Label Variants</h3>
             <div className="space-y-[12px]">
-              <Select
+              <TextArea
                 label="Default (Top Label)"
                 labelVariant="default"
                 size="medium"
                 value={defaultLabelValue}
                 onChange={(e) => setDefaultLabelValue(e.target.value)}
-                placeholder="Select"
-              >
-                <option value="item1">Context Menu Item 1</option>
-                <option value="item2">Context Menu Item 2</option>
-                <option value="item3">Context Menu Item 3</option>
-              </Select>
-              <Select
+                placeholder="Enter text..."
+              />
+              <TextArea
                 label="Small Default"
                 labelVariant="default"
                 size="small"
                 value={smallDefaultValue}
                 onChange={(e) => setSmallDefaultValue(e.target.value)}
-                placeholder="Select"
-              >
-                <option value="item1">Context Menu Item 1</option>
-                <option value="item2">Context Menu Item 2</option>
-                <option value="item3">Context Menu Item 3</option>
-              </Select>
-              <Select
+                placeholder="Enter text..."
+              />
+              <TextArea
                 label="Horizontal (Left Label)"
                 labelVariant="horizontal"
                 size="medium"
                 value={horizontalLabelValue}
                 onChange={(e) => setHorizontalLabelValue(e.target.value)}
-                placeholder="Select"
-              >
-                <option value="item1">Context Menu Item 1</option>
-                <option value="item2">Context Menu Item 2</option>
-                <option value="item3">Context Menu Item 3</option>
-              </Select>
-              <Select
+                placeholder="Enter text..."
+              />
+              <TextArea
                 label="Small Horizontal"
                 labelVariant="horizontal"
                 size="small"
                 value={smallHorizontalValue}
                 onChange={(e) => setSmallHorizontalValue(e.target.value)}
-                placeholder="Select"
-              >
-                <option value="item1">Context Menu Item 1</option>
-                <option value="item2">Context Menu Item 2</option>
-                <option value="item3">Context Menu Item 3</option>
-              </Select>
+                placeholder="Enter text..."
+              />
             </div>
           </div>
 
           <div>
             <h3 className="font-space text-[14px] mb-[8px]">States</h3>
             <div className="space-y-[12px]">
-              <Select
+              <TextArea
                 label="Error"
                 size="medium"
                 state="default"
                 error={true}
                 value={errorStateValue}
                 onChange={(e) => setErrorStateValue(e.target.value)}
-                placeholder="Select"
-              >
-                <option value="item1">Context Menu Item 1</option>
-                <option value="item2">Context Menu Item 2</option>
-                <option value="item3">Context Menu Item 3</option>
-              </Select>
-              <Select
+                placeholder="Enter text..."
+              />
+              <TextArea
                 label="Disabled"
                 size="medium"
                 state="default"
                 disabled={true}
                 value={disabledStateValue}
                 onChange={(e) => setDisabledStateValue(e.target.value)}
-                placeholder="Select"
-              >
-                <option value="item1">Context Menu Item 1</option>
-                <option value="item2">Context Menu Item 2</option>
-                <option value="item3">Context Menu Item 3</option>
-              </Select>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className="space-y-[12px]">
-        <h2 className="font-space text-[18px]">Context Menu Examples</h2>
-        <div className="max-w-[520px] space-y-[16px]">
-          <div>
-            <h3 className="font-space text-[14px] mb-[8px]">
-              Context Menu Demo
-            </h3>
-            <div className="space-y-[12px]">
-              <ContextMenu>
-                <ContextMenuItem>Context Menu Item</ContextMenuItem>
-                <ContextMenuItem>Context Menu Item</ContextMenuItem>
-                <ContextMenuItem hasSubmenu>Context Menu Item</ContextMenuItem>
-                <ContextMenuItem hasSubmenu>Context Menu Item</ContextMenuItem>
-                <ContextMenuDivider />
-                <ContextMenuItem selected>Context Menu Item</ContextMenuItem>
-                <ContextMenuItem>Context Menu Item</ContextMenuItem>
-                <ContextMenuDivider />
-                <ContextMenuSection title="Section Title">
-                  <ContextMenuItem>Context Menu Item</ContextMenuItem>
-                  <ContextMenuItem>Context Menu Item</ContextMenuItem>
-                </ContextMenuSection>
-              </ContextMenu>
+                placeholder="Enter text..."
+              />
             </div>
           </div>
         </div>
diff --git a/stories/TextArea.stories.js b/stories/TextArea.stories.js
new file mode 100644
index 0000000..f4fc114
--- /dev/null
+++ b/stories/TextArea.stories.js
@@ -0,0 +1,286 @@
+import React from "react";
+import TextArea from "../app/components/TextArea";
+
+export default {
+  title: "Forms/TextArea",
+  component: TextArea,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+    },
+    labelVariant: {
+      control: { type: "select" },
+      options: ["default", "horizontal"],
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "active", "hover", "focus", "error"],
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    error: {
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => <TextArea {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Text Area",
+  placeholder: "Enter text...",
+  value: "",
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  label: "Text Area",
+  placeholder: "Enter text...",
+  value:
+    "This is some sample text content that demonstrates how the text area looks with content.",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: "small",
+  label: "Small Text Area",
+  placeholder: "Enter text...",
+  value: "",
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+  size: "medium",
+  label: "Medium Text Area",
+  placeholder: "Enter text...",
+  value: "",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: "large",
+  label: "Large Text Area",
+  placeholder: "Enter text...",
+  value: "",
+};
+
+export const HorizontalLabel = Template.bind({});
+HorizontalLabel.args = {
+  labelVariant: "horizontal",
+  label: "Horizontal Label",
+  placeholder: "Enter text...",
+  value: "",
+};
+
+export const AllSizes = () => (
+  <div className="space-y-6">
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">Default Label Variant</h3>
+      <div className="space-y-4">
+        <TextArea
+          size="small"
+          label="Small Text Area"
+          placeholder="Enter text..."
+          value=""
+        />
+        <TextArea
+          size="medium"
+          label="Medium Text Area"
+          placeholder="Enter text..."
+          value=""
+        />
+        <TextArea
+          size="large"
+          label="Large Text Area"
+          placeholder="Enter text..."
+          value=""
+        />
+      </div>
+    </div>
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">Horizontal Label Variant</h3>
+      <div className="space-y-4">
+        <TextArea
+          size="small"
+          labelVariant="horizontal"
+          label="Small Text Area"
+          placeholder="Enter text..."
+          value=""
+        />
+        <TextArea
+          size="medium"
+          labelVariant="horizontal"
+          label="Medium Text Area"
+          placeholder="Enter text..."
+          value=""
+        />
+        <TextArea
+          size="large"
+          labelVariant="horizontal"
+          label="Large Text Area"
+          placeholder="Enter text..."
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+);
+
+export const States = () => (
+  <div className="space-y-6">
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">Default Label Variant</h3>
+      <div className="space-y-4">
+        <TextArea label="Default State" placeholder="Enter text..." value="" />
+        <TextArea
+          label="Active State"
+          placeholder="Enter text..."
+          value=""
+          state="active"
+        />
+        <TextArea
+          label="Hover State"
+          placeholder="Enter text..."
+          value=""
+          state="hover"
+        />
+        <TextArea
+          label="Focus State"
+          placeholder="Enter text..."
+          value=""
+          state="focus"
+        />
+        <TextArea
+          label="Error State"
+          placeholder="Enter text..."
+          value=""
+          error
+        />
+        <TextArea
+          label="Disabled State"
+          placeholder="Enter text..."
+          value=""
+          disabled
+        />
+      </div>
+    </div>
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">Horizontal Label Variant</h3>
+      <div className="space-y-4">
+        <TextArea
+          labelVariant="horizontal"
+          label="Default State"
+          placeholder="Enter text..."
+          value=""
+        />
+        <TextArea
+          labelVariant="horizontal"
+          label="Active State"
+          placeholder="Enter text..."
+          value=""
+          state="active"
+        />
+        <TextArea
+          labelVariant="horizontal"
+          label="Hover State"
+          placeholder="Enter text..."
+          value=""
+          state="hover"
+        />
+        <TextArea
+          labelVariant="horizontal"
+          label="Focus State"
+          placeholder="Enter text..."
+          value=""
+          state="focus"
+        />
+        <TextArea
+          labelVariant="horizontal"
+          label="Error State"
+          placeholder="Enter text..."
+          value=""
+          error
+        />
+        <TextArea
+          labelVariant="horizontal"
+          label="Disabled State"
+          placeholder="Enter text..."
+          value=""
+          disabled
+        />
+      </div>
+    </div>
+  </div>
+);
+
+export const Interactive = () => {
+  const [value, setValue] = React.useState("");
+  const [state, setState] = React.useState("default");
+  const [disabled, setDisabled] = React.useState(false);
+  const [error, setError] = React.useState(false);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Interactive TextArea</h3>
+        <div className="space-y-4">
+          <TextArea
+            label="Interactive Text Area"
+            placeholder="Type something..."
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            state={state}
+            disabled={disabled}
+            error={error}
+          />
+        </div>
+      </div>
+      <div className="space-y-4">
+        <h4 className="text-md font-semibold">Controls</h4>
+        <div className="space-y-2">
+          <div>
+            <label className="block text-sm font-medium mb-1">State:</label>
+            <select
+              value={state}
+              onChange={(e) => setState(e.target.value)}
+              className="px-3 py-1 border border-gray-300 rounded"
+            >
+              <option value="default">Default</option>
+              <option value="active">Active</option>
+              <option value="hover">Hover</option>
+              <option value="focus">Focus</option>
+            </select>
+          </div>
+          <div className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              id="disabled"
+              checked={disabled}
+              onChange={(e) => setDisabled(e.target.checked)}
+            />
+            <label htmlFor="disabled" className="text-sm">
+              Disabled
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              id="error"
+              checked={error}
+              onChange={(e) => setError(e.target.checked)}
+            />
+            <label htmlFor="error" className="text-sm">
+              Error
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/tests/accessibility/TextArea.a11y.test.jsx b/tests/accessibility/TextArea.a11y.test.jsx
new file mode 100644
index 0000000..e1a59e9
--- /dev/null
+++ b/tests/accessibility/TextArea.a11y.test.jsx
@@ -0,0 +1,121 @@
+import { expect, test, describe, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe, toHaveNoViolations } from "jest-axe";
+import TextArea from "../../app/components/TextArea";
+
+expect.extend(toHaveNoViolations);
+
+describe("TextArea Accessibility", () => {
+  test("renders without accessibility violations", async () => {
+    const { container } = render(<TextArea label="Test TextArea" />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("has proper label association", () => {
+    render(<TextArea label="Test Label" />);
+    const textarea = screen.getByRole("textbox");
+    const label = screen.getByText("Test Label");
+
+    expect(textarea).toHaveAttribute("id");
+    expect(label).toHaveAttribute("for", textarea.id);
+  });
+
+  test("has proper ARIA attributes", () => {
+    render(<TextArea label="Test Label" name="test-textarea" />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea).toHaveAttribute("id");
+    expect(textarea).toHaveAttribute("name", "test-textarea");
+  });
+
+  test("supports keyboard navigation", async () => {
+    const user = userEvent.setup();
+    render(<TextArea label="Test Label" />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.tab();
+
+    expect(textarea).toHaveFocus();
+  });
+
+  test("announces changes to screen readers", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(<TextArea label="Test Label" onChange={handleChange} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.type(textarea, "test");
+
+    expect(textarea).toHaveValue("test");
+  });
+
+  test("handles disabled state accessibility", () => {
+    render(<TextArea label="Test Label" disabled />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea).toBeDisabled();
+    expect(textarea).toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("handles error state accessibility", () => {
+    render(<TextArea label="Test Label" error />);
+    const textarea = screen.getByRole("textbox");
+
+    expect(textarea).toHaveAttribute("aria-invalid", "true");
+  });
+
+  test("maintains focus management", async () => {
+    const user = userEvent.setup();
+    render(<TextArea label="Test Label" />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.click(textarea);
+
+    expect(textarea).toHaveFocus();
+  });
+
+  test("supports horizontal label layout", () => {
+    render(<TextArea labelVariant="horizontal" label="Horizontal Label" />);
+    const textarea = screen.getByRole("textbox");
+    const label = screen.getByText("Horizontal Label");
+
+    expect(textarea).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+  });
+
+  test("handles different sizes accessibility", () => {
+    const { rerender } = render(<TextArea size="small" label="Small" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+
+    rerender(<TextArea size="medium" label="Medium" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+
+    rerender(<TextArea size="large" label="Large" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  test("maintains proper contrast ratios", () => {
+    render(<TextArea label="Test Label" />);
+    const textarea = screen.getByRole("textbox");
+    const label = screen.getByText("Test Label");
+
+    expect(textarea).toHaveClass("text-[var(--color-content-default-primary)]");
+    expect(label).toHaveClass("text-[var(--color-content-default-secondary)]");
+  });
+
+  test("supports screen reader announcements for state changes", async () => {
+    const user = userEvent.setup();
+    render(<TextArea label="Test Label" />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.click(textarea);
+    await user.type(textarea, "Hello");
+
+    expect(textarea).toHaveValue("Hello");
+  });
+});
diff --git a/tests/integration/TextArea.integration.test.jsx b/tests/integration/TextArea.integration.test.jsx
new file mode 100644
index 0000000..2fbdd9a
--- /dev/null
+++ b/tests/integration/TextArea.integration.test.jsx
@@ -0,0 +1,280 @@
+import React from "react";
+import { expect, test, describe, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import TextArea from "../../app/components/TextArea";
+
+// Test form component for integration testing
+const TestForm = () => {
+  const [formData, setFormData] = React.useState({
+    textarea1: "",
+    textarea2: "",
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <TextArea
+        label="First TextArea"
+        name="textarea1"
+        value={formData.textarea1}
+        onChange={(e) =>
+          setFormData((prev) => ({ ...prev, textarea1: e.target.value }))
+        }
+        placeholder="Enter first text..."
+      />
+      <TextArea
+        label="Second TextArea"
+        name="textarea2"
+        value={formData.textarea2}
+        onChange={(e) =>
+          setFormData((prev) => ({ ...prev, textarea2: e.target.value }))
+        }
+        placeholder="Enter second text..."
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+// Dynamic TextArea component for prop changes testing
+const DynamicTextArea = ({ size, labelVariant, state, disabled, error }) => {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <TextArea
+      label="Dynamic TextArea"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      size={size}
+      labelVariant={labelVariant}
+      state={state}
+      disabled={disabled}
+      error={error}
+      placeholder="Enter text..."
+    />
+  );
+};
+
+describe("TextArea Integration Tests", () => {
+  test("handles form submission with multiple textareas", async () => {
+    const user = userEvent.setup();
+    render(<TestForm />);
+
+    const firstTextarea = screen.getByPlaceholderText("Enter first text...");
+    const secondTextarea = screen.getByPlaceholderText("Enter second text...");
+    const submitButton = screen.getByRole("button", { name: /Submit/ });
+
+    await user.type(firstTextarea, "First content");
+    await user.type(secondTextarea, "Second content");
+
+    expect(firstTextarea).toHaveValue("First content");
+    expect(secondTextarea).toHaveValue("Second content");
+
+    await user.click(submitButton);
+    // Form submission should not cause errors
+  });
+
+  test("handles keyboard navigation between textareas", async () => {
+    const user = userEvent.setup();
+    render(<TestForm />);
+
+    const firstTextarea = screen.getByPlaceholderText("Enter first text...");
+    const secondTextarea = screen.getByPlaceholderText("Enter second text...");
+
+    await user.click(firstTextarea);
+    expect(firstTextarea).toHaveFocus();
+
+    await user.tab();
+    expect(secondTextarea).toHaveFocus();
+  });
+
+  test("handles dynamic prop changes", () => {
+    const { rerender } = render(<DynamicTextArea size="small" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[60px]");
+
+    rerender(<DynamicTextArea size="medium" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[100px]");
+
+    rerender(<DynamicTextArea size="large" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[150px]");
+  });
+
+  test("handles state changes", () => {
+    const { rerender } = render(<DynamicTextArea state="default" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<DynamicTextArea state="hover" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<DynamicTextArea state="focus" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-utility-info)]",
+      "shadow-[0_0_5px_3px_#3281F8]"
+    );
+  });
+
+  test("handles disabled state changes", () => {
+    const { rerender } = render(<DynamicTextArea disabled={false} />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).not.toBeDisabled();
+
+    rerender(<DynamicTextArea disabled={true} />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toBeDisabled();
+  });
+
+  test("handles error state changes", () => {
+    const { rerender } = render(<DynamicTextArea error={false} />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<DynamicTextArea error={true} />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-utility-negative)]"
+    );
+  });
+
+  test("handles label variant changes", () => {
+    const { rerender } = render(<DynamicTextArea labelVariant="default" />);
+    let container = screen.getByRole("textbox").closest("div").parentElement;
+    expect(container).toHaveClass("flex", "flex-col");
+
+    rerender(<DynamicTextArea labelVariant="horizontal" />);
+    container = screen.getByRole("textbox").closest("div").parentElement;
+    expect(container).toHaveClass("flex", "items-center", "gap-[12px]");
+  });
+
+  test("handles text input and changes", async () => {
+    const user = userEvent.setup();
+    render(<DynamicTextArea />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.type(textarea, "Hello World");
+
+    expect(textarea).toHaveValue("Hello World");
+  });
+
+  test("handles focus and blur events", async () => {
+    const user = userEvent.setup();
+    const handleFocus = vi.fn();
+    const handleBlur = vi.fn();
+
+    render(
+      <TextArea
+        label="Test TextArea"
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+    );
+
+    const textarea = screen.getByRole("textbox");
+
+    await user.click(textarea);
+    expect(handleFocus).toHaveBeenCalled();
+
+    await user.tab();
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  test("handles multiple textareas with different configurations", () => {
+    render(
+      <div>
+        <TextArea
+          size="small"
+          label="Small TextArea"
+          placeholder="Small placeholder"
+        />
+        <TextArea
+          size="medium"
+          labelVariant="horizontal"
+          label="Medium Horizontal"
+          placeholder="Medium placeholder"
+        />
+        <TextArea
+          size="large"
+          label="Large TextArea"
+          placeholder="Large placeholder"
+        />
+      </div>
+    );
+
+    expect(
+      screen.getByPlaceholderText("Small placeholder")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText("Medium placeholder")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText("Large placeholder")
+    ).toBeInTheDocument();
+  });
+
+  test("handles form validation with error states", () => {
+    render(
+      <div>
+        <TextArea label="Valid TextArea" placeholder="Valid input" />
+        <TextArea label="Invalid TextArea" placeholder="Invalid input" error />
+        <TextArea
+          label="Disabled TextArea"
+          placeholder="Disabled input"
+          disabled
+        />
+      </div>
+    );
+
+    const validTextarea = screen.getByPlaceholderText("Valid input");
+    const invalidTextarea = screen.getByPlaceholderText("Invalid input");
+    const disabledTextarea = screen.getByPlaceholderText("Disabled input");
+
+    expect(validTextarea).toHaveClass(
+      "border-[var(--color-border-default-tertiary)]"
+    );
+    expect(invalidTextarea).toHaveClass(
+      "border-[var(--color-border-default-utility-negative)]"
+    );
+    expect(disabledTextarea).toBeDisabled();
+  });
+
+  test("handles performance with multiple re-renders", () => {
+    const { rerender } = render(<DynamicTextArea />);
+
+    // Simulate multiple re-renders
+    for (let i = 0; i < 10; i++) {
+      rerender(<DynamicTextArea size={i % 2 === 0 ? "small" : "large"} />);
+    }
+
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  test("handles accessibility with screen readers", async () => {
+    const user = userEvent.setup();
+    render(<TextArea label="Accessible TextArea" />);
+
+    const textarea = screen.getByRole("textbox");
+    const label = screen.getByText("Accessible TextArea");
+
+    expect(textarea).toHaveAttribute("id");
+    expect(label).toHaveAttribute("for", textarea.id);
+
+    await user.click(textarea);
+    expect(textarea).toHaveFocus();
+  });
+});
diff --git a/tests/unit/TextArea.test.jsx b/tests/unit/TextArea.test.jsx
new file mode 100644
index 0000000..49bf6e7
--- /dev/null
+++ b/tests/unit/TextArea.test.jsx
@@ -0,0 +1,203 @@
+import { expect, test, describe, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import TextArea from "../../app/components/TextArea";
+
+describe("TextArea", () => {
+  test("renders with default props", () => {
+    render(<TextArea />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  test("renders with label", () => {
+    render(<TextArea label="Test Label" />);
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
+  });
+
+  test("renders with placeholder", () => {
+    render(<TextArea placeholder="Enter text..." />);
+    expect(screen.getByPlaceholderText("Enter text...")).toBeInTheDocument();
+  });
+
+  test("renders with value", () => {
+    render(<TextArea value="Test value" />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveValue("Test value");
+  });
+
+  test("renders with different sizes", () => {
+    const { rerender } = render(<TextArea size="small" label="Small" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[60px]");
+
+    rerender(<TextArea size="medium" label="Medium" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[100px]");
+
+    rerender(<TextArea size="large" label="Large" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[150px]");
+  });
+
+  test("renders with horizontal label variant", () => {
+    render(<TextArea labelVariant="horizontal" label="Horizontal Label" />);
+    const container = screen.getByRole("textbox").closest("div").parentElement;
+    expect(container).toHaveClass("flex", "items-center", "gap-[12px]");
+  });
+
+  test("renders with default label variant", () => {
+    render(<TextArea labelVariant="default" label="Default Label" />);
+    const container = screen.getByRole("textbox").closest("div").parentElement;
+    expect(container).toHaveClass("flex", "flex-col");
+  });
+
+  test("applies disabled state", () => {
+    render(<TextArea disabled />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeDisabled();
+  });
+
+  test("applies error state", () => {
+    render(<TextArea error />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-utility-negative)]"
+    );
+  });
+
+  test("applies different states", () => {
+    const { rerender } = render(<TextArea state="active" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<TextArea state="hover" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+    );
+
+    rerender(<TextArea state="focus" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass(
+      "border-[var(--color-border-default-utility-info)]",
+      "shadow-[0_0_5px_3px_#3281F8]"
+    );
+  });
+
+  test("calls onChange when text changes", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(<TextArea onChange={handleChange} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.type(textarea, "test");
+
+    expect(handleChange).toHaveBeenCalledTimes(4);
+  });
+
+  test("calls onFocus when focused", async () => {
+    const user = userEvent.setup();
+    const handleFocus = vi.fn();
+    render(<TextArea onFocus={handleFocus} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.click(textarea);
+
+    expect(handleFocus).toHaveBeenCalled();
+  });
+
+  test("calls onBlur when blurred", async () => {
+    const user = userEvent.setup();
+    const handleBlur = vi.fn();
+    render(<TextArea onBlur={handleBlur} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.click(textarea);
+    await user.tab();
+
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  test("does not call onChange when disabled", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(<TextArea disabled onChange={handleChange} />);
+
+    const textarea = screen.getByRole("textbox");
+    await user.type(textarea, "test");
+
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  test("applies custom className", () => {
+    render(<TextArea className="custom-class" />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("custom-class");
+  });
+
+  test("forwards ref", () => {
+    const ref = vi.fn();
+    render(<TextArea ref={ref} />);
+    expect(ref).toHaveBeenCalled();
+  });
+
+  test("applies correct height for small horizontal label", () => {
+    render(
+      <TextArea
+        size="small"
+        labelVariant="horizontal"
+        label="Small Horizontal"
+      />
+    );
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[60px]");
+  });
+
+  test("applies correct height for medium horizontal label", () => {
+    render(
+      <TextArea
+        size="medium"
+        labelVariant="horizontal"
+        label="Medium Horizontal"
+      />
+    );
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-[110px]");
+  });
+
+  test("applies correct border radius for different sizes", () => {
+    const { rerender } = render(<TextArea size="small" />);
+    let textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveStyle({
+      borderRadius: "var(--measures-radius-xsmall)",
+    });
+
+    rerender(<TextArea size="medium" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveStyle({
+      borderRadius: "var(--measures-radius-xsmall)",
+    });
+
+    rerender(<TextArea size="large" />);
+    textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveStyle({
+      borderRadius: "var(--measures-radius-small)",
+    });
+  });
+
+  test("applies correct text color", () => {
+    render(<TextArea />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("text-[var(--color-content-default-primary)]");
+  });
+
+  test("applies correct label color", () => {
+    render(<TextArea label="Test Label" />);
+    const label = screen.getByText("Test Label");
+    expect(label).toHaveClass("text-[var(--color-content-default-secondary)]");
+  });
+});