feat(front): update InputGroupField component with improved delete button styling and add new Textarea component for enhanced text input

front/components/Field/InputGroupField.vue

@@ -20,7 +20,14 @@ const addInput = ref('')
                 :aria-invalid="!!errorMessage || undefined"
                 v-bind="$attrs"
             />
-            <Button variant="ghost" size="icon" @click="setValue(value.filter((_, i) => i !== index))"><LucideX class="size-4" /></Button>
+            <Button
+                variant="ghost"
+                size="icon"
+                class="bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white"
+                @click="setValue(value.filter((_, i) => i !== index))"
+            >
+                <LucideTrash class="size-4" />
+            </Button>
         </div>
         <div class="flex flex-row gap-2 items-center">
             <Input v-model="addInput" :aria-invalid="!!errorMessage || undefined" v-bind="$attrs" />

front/components/Field/TextareaField.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+
+const props = withDefaults(
+    defineProps<{
+        name: string
+        label?: string
+        placeholder?: string
+        rows?: number
+    }>(),
+    {
+        rows: 3,
+    }
+)
+
+const { value } = useField<string>(props.name)
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Label v-if="label">{{ label }}</Label>
+        <Textarea v-model="value" :placeholder="placeholder" :rows="rows" v-bind="$attrs" />
+    </div>
+</template>

front/components/ui/textarea/Textarea.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+    defaultValue?: string | number
+    modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+    (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+    <textarea
+        v-model="modelValue"
+        data-slot="textarea"
+        :class="
+            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',
+                props.class
+            )
+        "
+    />
+</template>

front/components/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'