New Changes with Form with From Group

src/components/FieldRow.astro

@@ -0,0 +1,61 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "../utils/cn";
+
+interface Props extends HTMLAttributes<"fieldset"> {
+    label?: string;
+    description?: string;
+    error?: string;
+    columns?: 1 | 2 | 3 | 4;
+    gap?: "sm" | "md" | "lg";
+}
+
+const {
+    label,
+    description,
+    error,
+    columns = 2,
+    gap = "md",
+    class: className,
+    ...rest
+}: Props = Astro.props;
+
+const gridCols =
+    columns === 4
+        ? "wr:grid-cols-1 sm:wr:grid-cols-4"
+        : columns === 3
+          ? "wr:grid-cols-1 sm:wr:grid-cols-3"
+          : columns === 2
+            ? "wr:grid-cols-1 sm:wr:grid-cols-2"
+            : "wr:grid-cols-1";
+
+const gaps = gap === "lg" ? "wr:gap-4" : gap === "sm" ? "wr:gap-2" : "wr:gap-3";
+---
+
+<fieldset class={cn("wr:space-y-2", className)} {...rest}>
+    {
+        label && (
+            <legend class="wr:text-sm wr:font-medium wr:text-foreground">
+                {label}
+            </legend>
+        )
+    }
+
+    {
+        description && (
+            <p class="wr:text-xs wr:text-muted-foreground">{description}</p>
+        )
+    }
+
+    <div class={cn("wr:grid", gridCols, gaps)}>
+        <slot />
+    </div>
+
+    {
+        error && (
+            <p class="wr:mt-1 wr:bg-red-100 wr:border wr:border-red-200 wr:text-sm wr:text-red-800 wr:rounded-lg wr:p-3 wr:dark:bg-red-800/10 wr:dark:border-red-900 wr:dark:text-red-500">
+                {error}
+            </p>
+        )
+    }
+</fieldset>

src/components/Form.astro

@@ -80,7 +80,7 @@ const formId = `f-${Math.random().toString(36).slice(2)}`;
         }
         {
             description && (
-                <p class="wr:text-sm wr:text-muted-foreground wr:mt-1 wr:text-gray-600 wr:dark:text-neutral-400">
+                <p class="wr:text-sm wr:mt-1 wr:text-gray-600 wr:dark:text-neutral-400">
                     {description}
                 </p>
             )