feat: better components

client/src/lib/ui/form/field.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { setFormContext } from './context.svelte';
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		name?: string;
+	};
+	let { ref = $bindable(null), class: className, name, children, ...restProps }: Props = $props();
+
+	const uid = $props.id();
+
+	if (name) {
+		setFormContext(uid, name);
+	}
+</script>
+
+<div bind:this={ref} class={cn('flex flex-col gap-1')} {...restProps}>
+	{@render children?.()}
+</div>