feat: support multiple form groups with legend

src/Field.astro

@@ -0,0 +1,31 @@
+---
+import { FormControl } from './core/form-control';
+
+export interface Props {
+	control: FormControl;
+}
+
+const { control } = Astro.props;
+---
+
+<div>
+	{
+		control.label && (!control.labelPosition || control.labelPosition === 'left') ? (
+			<label for={control.name}>{control.label}</label>
+		) : null
+	}
+
+	<input
+		name={control.name}
+		id={control.name}
+		type={control.type}
+		value={control.value}
+		checked={control.value === 'checked'}
+	/>
+
+	{
+		control.label && control.labelPosition === 'right' ? (
+			<label for={control.name}>{control.label}</label>
+		) : null
+	}
+</div>

src/FieldSet.astro

@@ -0,0 +1,15 @@
+---
+import Field from './Field.astro';
+import { FormGroup } from './core/form-group';
+
+export interface Props {
+	group: FormGroup;
+}
+
+const { group } = Astro.props;
+---
+
+<fieldset>
+	{group.name && <legend>{group.name}</legend>}
+	{group?.controls?.map((control) => <Field control={control} />)}
+</fieldset>

src/Form.astro

@@ -1,32 +1,13 @@
 ---
-import { FormGroup } from './form-group';
+import { FormGroup } from './core/form-group';
+import FieldSet from './FieldSet.astro';
 export interface Props {
-	formGroup: FormGroup;
+	formGroups: FormGroup[];
 }
 
-const form: FormGroup = Astro.props.formGroup;
+const { formGroups } = Astro.props;
 ---
 
 <form>
-	{
+	{formGroups.map((group) => <FieldSet group={group} />)}
-		form?.controls?.map((control) => (
-			<div>
-				{control.label && (!control.labelPosition || control.labelPosition === 'left') ? (
-					<label for={control.name}>{control.label}</label>
-				) : null}
-
-				<input
-					name={control.name}
-					id={control.name}
-					type={control.type}
-					value={control.value}
-					checked={control.value === 'checked'}
-				/>
-
-				{control.label && control.labelPosition === 'right' ? (
-					<label for={control.name}>{control.label}</label>
-				) : null}
-			</div>
-		))
-	}
 </form>

src/core/form-group.ts

@@ -2,8 +2,10 @@ import { FormControl } from './form-control';
 
 export class FormGroup {
 	controls: FormControl[];
+	name?: string;
 
-	constructor(controls: FormControl[]) {
+	constructor(controls: FormControl[], name?: string) {
+		this.name = name || null;
 		this.controls = controls.map((control) => ({
 			...control,
 			labelPosition: control.labelPosition || 'left',

src/index.ts

@@ -1,3 +1,3 @@
 export * from './Form.astro';
-export * from './form-group';
+export * from './core/form-group';
-export * from './form-control';
+export * from './core/form-control';