astro-reactive-form/packages/form/components/Form.astro

---
import type { Submit } from '@astro-reactive/common';
import { FormGroup, FormControl } from '../core';
import FieldSet from './FieldSet.astro';
import Field from './Field.astro';
import ShortUniqueId from 'short-unique-id';

export interface Props {
	formGroups: FormGroup | FormGroup[];
	readOnly?: boolean;
	showValidationHints?: boolean;
	submitControl?: Submit;
	theme?: 'light' | 'dark';
}

const {
	submitControl,
	formGroups = [],
	theme,
	showValidationHints = false,
	readOnly = false,
} = Astro.props;

const uid = new ShortUniqueId({ length: 9 });
const formTheme = theme ?? 'light';
const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;
---

<form
	class={formTheme}
	name={formName}
	id={formId}
	data-validator-hints={showValidationHints.toString()}
>
	{
		Array.isArray(formGroups)
			? formGroups?.map((group) => (
					<FieldSet showValidationHints={showValidationHints} group={group} readOnly={readOnly} />
			  ))
			: formGroups?.controls.map((control) => (
					<Field showValidationHints={showValidationHints} control={control} readOnly={readOnly} />
			  ))
	}
	{
		submitControl && (
			<Field showValidationHints={showValidationHints} control={new FormControl(submitControl)} />
		)
	}
</form>

<style>
	.light {
		color-scheme: light;
	}

	.dark {
		color-scheme: dark;
	}
</style>

<style is:global>
	[data-validator-hints='true'][data-validator-haserrors='true'],
	[data-validator-hints='true'] [data-validator-haserrors='true'] {
		color: red;
		border-color: red;
	}
</style>