From 71c22e465e8fc615f1f573b9057b8327b070656f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 25 Feb 2026 16:20:25 +0100
Subject: [PATCH] refactor: replace html textarea with shadcn Textarea
 component

---
 app/(app)/pastel/batch/page.tsx |  5 +++--
 components/figlet/TextInput.tsx | 10 +++-------
 components/ui/textarea.tsx      | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 components/ui/textarea.tsx

diff --git a/app/(app)/pastel/batch/page.tsx b/app/(app)/pastel/batch/page.tsx
index b38e4c9..01789fd 100644
--- a/app/(app)/pastel/batch/page.tsx
+++ b/app/(app)/pastel/batch/page.tsx
@@ -10,6 +10,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { PaletteGrid } from '@/components/pastel/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/ExportMenu';
@@ -112,11 +113,11 @@ export default function BatchPage() {
                   Enter colors (one per line or comma-separated). Supports hex format
                 </p>
 
-                <textarea
+                <Textarea
                   value={inputColors}
                   onChange={(e) => setInputColors(e.target.value)}
                   placeholder="#ff0099, #00ff99, #9900ff&#10;#ff5533&#10;#3355ff"
-                  className="w-full h-48 p-3 border border-border rounded-xl bg-input font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50 transition-all duration-200"
+                  className="h-48 font-mono"
                 />
 
                 <p className="text-xs text-muted-foreground mt-2">
diff --git a/components/figlet/TextInput.tsx b/components/figlet/TextInput.tsx
index 383715d..e58363e 100644
--- a/components/figlet/TextInput.tsx
+++ b/components/figlet/TextInput.tsx
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { cn } from '@/lib/utils';
+import { Textarea } from '@/components/ui/textarea';
 
 export interface TextInputProps {
   value: string;
@@ -13,16 +14,11 @@ export interface TextInputProps {
 export function TextInput({ value, onChange, placeholder, className }: TextInputProps) {
   return (
     <div className={cn('relative', className)}>
-      <textarea
+      <Textarea
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder || 'Type something...'}
-        className={cn(
-          "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-          "h-32 resize-none"
-        )}
+        className="h-32 resize-none"
         maxLength={100}
       />
       <div className="absolute bottom-2 right-2 text-xs text-muted-foreground">
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..a5d1395
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils/index"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }