feat: add ability define user groups for sign up tokens (#1155)

frontend/src/lib/components/form/form-input.svelte

@@ -8,6 +8,17 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
+	type WithoutChildren = {
+		children?: undefined;
+		input?: FormInput<string | boolean | number | Date | undefined>;
+		labelFor?: never;
+	};
+	type WithChildren = {
+		children: Snippet;
+		input?: any;
+		labelFor?: string;
+	};
+
 	let {
 		input = $bindable(),
 		label,
@@ -18,25 +29,25 @@
 		type = 'text',
 		children,
 		onInput,
+		labelFor,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
-		input?: FormInput<string | boolean | number | Date | undefined>;
-		label?: string;
-		description?: string;
-		docsLink?: string;
-		placeholder?: string;
-		disabled?: boolean;
-		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'date';
-		onInput?: (e: FormInputEvent) => void;
-		children?: Snippet;
-	} = $props();
+	}: HTMLAttributes<HTMLDivElement> &
+		(WithChildren | WithoutChildren) & {
+			label?: string;
+			description?: string;
+			docsLink?: string;
+			placeholder?: string;
+			disabled?: boolean;
+			type?: 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'date';
+			onInput?: (e: FormInputEvent) => void;
+		} = $props();
 
 	const id = label?.toLowerCase().replace(/ /g, '-');
 </script>
 
 <div {...restProps}>
 	{#if label}
-		<Label required={input?.required} class="mb-0" for={id}>{label}</Label>
+		<Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Label>
 	{/if}
 	{#if description}
 		<p class="text-muted-foreground mt-1 text-xs">