Add form files

src/lib/forms/Form.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { JSONSchema7 } from "json-schema";
+	import { setContext } from "svelte";
+	import { FormService } from "./form.service.svelte";
+
+	let {
+		children,
+		schema,
+		value = $bindable()
+	}: { children: any; schema?: JSONSchema7; value?: any } = $props();
+
+	const formService = new FormService();
+	if (value) {
+		formService.data = value;
+	}
+    $effect(() => {
+        value = formService.data;
+    });
+	setContext("formService", formService);
+</script>
+
+{@render children()}

src/lib/forms/FormField.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+	import type { FormService } from "./form.service.svelte.js";
+
+	const { path } = $props<{ path: string }>();
+
+	const formService: FormService = getContext("formService");
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		formService.updateDataForPath(path, target.value);
+	}
+</script>
+
+<input
+	type="text"
+	placeholder="Name"
+	class="input input-bordered m-2"
+	oninput={handleInput}
+	value={formService.getValueForPath(path)}
+/>

src/lib/forms/form.service.svelte.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type FormValue = any;
+
+export class FormService<T = FormValue> {
+	data = $state<T>({} as FormValue);
+
+	public getValueForPath(path: string): FormValue {
+		return this.data[path];
+	}
+	public updateDataForPath(path: string, value: FormValue) {
+		this.data = { ...this.data, [path]: value };
+	}
+
+	public updateData(value: FormValue): void {
+		this.data = value;
+	}
+}

src/routes/+layout.svelte

@@ -177,6 +177,7 @@
 				/>
 			</a>
 		</div>
+		<div class="alert alert-warning mb-8">This library is based on Svelte 5 beta versions. Even though these versions are already "release candidates", things might not work well enough for your production usage. Use at own risk.</div>
 		<slot></slot>
 	</div>
 </AppShell>

src/routes/forms/form-container/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import ComponentCode from "$lib/docs/ComponentCode.svelte";
+	import ComponentHeader from "$lib/docs/ComponentHeader.svelte";
+	import ComponentPlayground from "$lib/docs/ComponentPlayground.svelte";
+	import Form from "$lib/forms/Form.svelte";
+	import FormField from "$lib/forms/FormField.svelte";
+	import type { JSONSchema7 } from "json-schema";
+
+	const schema: JSONSchema7 = {
+		type: "object",
+		properties: {
+			firstName: {
+				type: "string",
+				title: "firstName"
+			}
+		}
+	};
+
+	let formValue = $state({ firstName: "Max" });
+</script>
+
+<ComponentHeader
+	title="Form Container"
+	description="The Form Container wraps Form Input Components and handles the form value."
+/>
+
+<ComponentPlayground value={formValue}>
+	<Form {schema} bind:value={formValue}>
+		<FormField path="firstName" />
+		<FormField path="lastName" />
+	</Form>
+</ComponentPlayground>