From bb5a7c4a36353cf3f067e40f96156fa5b91cb13d Mon Sep 17 00:00:00 2001
From: Manjiro Sano <mithil1323@gmail.com>
Date: Tue, 25 Nov 2025 10:32:41 +0530
Subject: [PATCH 1/2] feat: Add ghost/transparent variant to Textarea component

Updated TypeScript definition to include 'ghost' variant alongside 'outline' and 'soft' variants.

Addresses issue #6 - Part 1 of 2 (CSS styling to be added in next commit)
---
 src/components/Textarea/Textarea.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index 5f18d55..65b9815 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -12,8 +12,7 @@ export type TextareaProps = {
    * Visual style of the textarea
    * @default outline
    */
-  variant?: Variants<"outline" | "soft">
-  /**
+  variant?: Variants<"outline" | "soft" | "ghost">  /**
    * Controls the size of the textarea
    *
    * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |

From bc334d940c18287363ed3f4355709d6dec014e26 Mon Sep 17 00:00:00 2001
From: Manjiro Sano <mithil1323@gmail.com>
Date: Tue, 25 Nov 2025 10:35:57 +0530
Subject: [PATCH 2/2] feat: Add CSS styling for ghost variant in Textarea

Implemented transparent ghost variant styling:
- Transparent background with no border by default
- Subtle box-shadow on focus for visual feedback
- Invalid state indication with red border
- Seamlessly blends with custom-styled containers

Addresses issue #6 - Part 2 of 2 (completes the feature)
---
 src/components/Textarea/Textarea.module.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/Textarea/Textarea.module.css b/src/components/Textarea/Textarea.module.css
index 25f9c3d..46c6b65 100644
--- a/src/components/Textarea/Textarea.module.css
+++ b/src/components/Textarea/Textarea.module.css
@@ -156,6 +156,24 @@
     }
   }
 
+  /* =============================================
+     Ghost variant
+     ============================================= */
+  &:where([data-variant="ghost"]) {
+    /* No background or border by default, blends with container */
+    background-color: transparent;
+
+    &:not([data-disabled]) {
+      &[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
+      }
+
+      &[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+    }
+  }
+
   /* =============================================
     Invalid
   ============================================= */