Fix JSON forms

Author: NicoClack

frontend/src/lib/form/JsonForm.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { BasicForm, createForm, type Schema, type UiSchemaRoot } from "@sjsf/form";
 	import "@sjsf/shadcn4-theme/styles.css";
-	import { setShadcnContext } from "./theme";
 
 	import { idBuilder, merger, resolver, theme, translation, validator } from "$lib/form/defaults";
+	import { setShadcnContext } from "./theme";
 
 	interface Props {
 		schema: Schema;

frontend/src/lib/form/components/ButtonGroup.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let { class: className, children, ...restProps } = $props();
+</script>
+
+<div class={cn("flex items-center gap-2", className)} {...restProps}>
+	{@render children?.()}
+</div>

frontend/src/lib/form/components/Field.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let { class: className, children, ...restProps } = $props();
+</script>
+
+<div class={cn("grid gap-2", className)} {...restProps}>
+	{@render children?.()}
+</div>

frontend/src/lib/form/components/FieldDescription.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let { class: className, children, ...restProps } = $props();
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...restProps}>
+	{@render children?.()}
+</p>

frontend/src/lib/form/components/FieldError.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let { class: className, children, ...restProps } = $props();
+</script>
+
+<div class={cn("text-sm text-destructive", className)} {...restProps}>
+	{@render children?.()}
+</div>

frontend/src/lib/form/components/FieldGroup.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let { class: className, children, ...restProps } = $props();
+</script>
+
+<div class={cn("grid gap-2", className)} {...restProps}>
+	{@render children?.()}
+</div>

frontend/src/lib/form/components/FieldLabel.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Label from "$lib/components/ui/label/label.svelte";
+
+	let { children, ...restProps } = $props();
+</script>
+
+<Label {...restProps}>
+	{@render children?.()}
+</Label>

frontend/src/lib/form/components/FieldLegend.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let { class: className, children, ...restProps } = $props();
+</script>
+
+<legend class={cn("text-sm font-medium", className)} {...restProps}>
+	{@render children?.()}
+</legend>

frontend/src/lib/form/components/FieldSet.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let { class: className, children, ...restProps } = $props();
+</script>
+
+<fieldset class={cn("grid gap-4", className)} {...restProps}>
+	{@render children?.()}
+</fieldset>

frontend/src/lib/form/components/FieldTitle.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let { class: className, children, ...restProps } = $props();
+</script>
+
+<div class={cn("text-sm leading-none font-medium", className)} {...restProps}>
+	{@render children?.()}
+</div>