New Field Changes

src/components/Field.astro

@@ -71,6 +71,21 @@ const inputBase = cva(
     },
 );
 
+const textareaBase = cva(
+    "wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:h-[350px] wr:border-border wr:rounded-lg wr:sm:text-sm wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
+    {
+        variants: {
+            size: {
+                sm: "wr:px-3 wr:text-sm",
+                md: "wr:px-3 wr:text-sm",
+                lg: "wr:px-4 wr:text-base",
+            },
+            withIconLeft: { true: "wr:pl-10" },
+            withIconRight: { true: "wr:pr-10" },
+        },
+    },
+);
+
 const selectBase = cva(
     "wr:py-3 wr:px-4 wr:pe-9 wr:block wr:w-full wr:border-border wr:rounded-lg wr:text-sm wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
     {
@@ -281,7 +296,7 @@ const controlWrap = "wr:relative";
         p.kind === "textarea" && (
             <div class={cn(controlWrap, "wr:flex-1")}>
                 {p.iconLeft && (
-                    <span class="wr:absolute wr:inset-y-0 wr:left-0 wr:flex wr:items-center wr:pl-3 wr:pointer-events-none wr:text-muted-foreground">
+                    <span class="wr:absolute wr:inset-y-0 wr:left-0 wr:flex wr:items-start wr:pl-3 wr:pointer-events-none wr:text-muted-foreground">
                         <Icon name={p.iconLeft} class={iconSize} />
                     </span>
                 )}
@@ -309,7 +324,7 @@ const controlWrap = "wr:relative";
                               : "wr:text-sm wr:p-3",
                         p.error &&
                             "wr:border-danger wr:focus-visible:ring-danger/40",
-                        inputBase({
+                        textareaBase({
                             size: p.size ?? "md",
                             withIconLeft: !!p.iconLeft,
                             withIconRight: !!p.iconRight,
@@ -319,7 +334,7 @@ const controlWrap = "wr:relative";
                 />
 
                 {p.iconRight && (
-                    <span class="wr:absolute wr:inset-y-0 wr:right-0 wr:pr-3 wr:flex wr:items-center wr:pointer-events-none wr:text-muted-foreground">
+                    <span class="wr:absolute wr:inset-y-0 wr:right-0 wr:pr-3 wr:flex wr:items-start wr:pointer-events-none wr:text-muted-foreground">
                         <Icon name={p.iconRight} class={iconSize} />
                     </span>
                 )}