New Changes with table Classes and Modification

src/components/Field.astro

@@ -279,7 +279,13 @@ const controlWrap = "wr:relative";
 
     {
         p.kind === "textarea" && (
-            <div class={controlWrap}>
+            <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">
+                        <Icon name={p.iconLeft} class={iconSize} />
+                    </span>
+                )}
+
                 <textarea
                     id={fieldId}
                     name={p.name}
@@ -303,16 +309,32 @@ const controlWrap = "wr:relative";
                               : "wr:text-sm wr:p-3",
                         p.error &&
                             "wr:border-danger wr:focus-visible:ring-danger/40",
+                        inputBase({
+                            size: p.size ?? "md",
+                            withIconLeft: !!p.iconLeft,
+                            withIconRight: !!p.iconRight,
+                        }),
                     )}
                     data-initial={typeof p.value === "string" ? p.value : ""}
                 />
+
+                {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">
+                        <Icon name={p.iconRight} class={iconSize} />
+                    </span>
+                )}
             </div>
         )
     }
 
     {
         p.kind === "select" && (
-            <div class={controlWrap}>
+            <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">
+                        <Icon name={p.iconLeft} class={iconSize} />
+                    </span>
+                )}
                 <select
                     id={fieldId}
                     name={p.name}
@@ -327,7 +349,11 @@ const controlWrap = "wr:relative";
                             .join(" ") || undefined
                     }
                     class={cn(
-                        selectBase({ size: p.size ?? "md" }),
+                        selectBase({
+                            size: p.size ?? "md",
+                            withIconLeft: !!p.iconLeft,
+                            withIconRight: !!p.iconRight,
+                        }),
                         "wr:appearance-none wr:bg-none wr:pr-9",
                         p.error &&
                             "wr:border-danger wr:focus-visible:ring-danger/40",
@@ -355,6 +381,12 @@ const controlWrap = "wr:relative";
                 <span class="wr:pointer-events-none wr:absolute wr:inset-y-0 wr:right-0 wr:pr-3 wr:flex wr:items-center wr:text-muted-foreground">
                     <Icon name="mdi:chevron-down" class={iconSize} />
                 </span>
+
+                {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">
+                        <Icon name={p.iconRight} class={iconSize} />
+                    </span>
+                )}
             </div>
         )
     }