chore: move structure to root

src/lib/components/ui/form/form-button.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import * as Button from '$lib/components/ui/button';
+	type $$Props = Button.Props;
+	type $$Events = Button.Events;
+</script>
+
+<Button.Root type="submit" {...$$restProps} on:click on:keydown>
+	<slot />
+</Button.Root>

src/lib/components/ui/form/form-checkbox.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
+
+	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
+
+	const { name, setValue, attrStore, value } = getFormField();
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { name: nameAttr, value: valueAttr, ...rest } = $attrStore;
+</script>
+
+<Checkbox
+	{...rest}
+	checked={typeof $value === 'boolean' ? $value : false}
+	onCheckedChange={(v) => {
+		onCheckedChange?.(v);
+		setValue(v);
+	}}
+	{...$$restProps}
+	on:click
+	on:keydown
+/>
+<input hidden {name} value={$value} />

src/lib/components/ui/form/form-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Description
+	class={cn('text-[0.8rem] text-muted-foreground', className)}
+	{...$$restProps}
+>
+	<slot />
+</FormPrimitive.Description>

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { Input, type InputEvents } from '$lib/components/ui/input';
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	const { attrStore, value } = getFormField();
+</script>
+
+<Input
+	{...$attrStore}
+	bind:value={$value}
+	{...$$restProps}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+/>

src/lib/components/ui/form/form-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('space-y-2', className)} {...$$restProps}>
+	<slot />
+</div>

src/lib/components/ui/form/form-label.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Label as LabelPrimitive } from 'bits-ui';
+	import { getFormField } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import { Label } from '$lib/components/ui/label';
+
+	type $$Props = LabelPrimitive.Props;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+
+	const { errors, ids } = getFormField();
+</script>
+
+<Label for={$ids.input} class={cn($errors && 'text-destructive', className)} {...$$restProps}>
+	<slot />
+</Label>

src/lib/components/ui/form/form-native-select.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from 'formsnap';
+	import { buttonVariants } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
+	import { CaretSort } from 'radix-icons-svelte';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLSelectAttributes;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class="relative">
+	<FormPrimitive.Select
+		class={cn(
+			buttonVariants({ variant: 'outline' }),
+			'appearance-none bg-transparent font-normal',
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+	</FormPrimitive.Select>
+	<CaretSort class="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
+</div>

src/lib/components/ui/form/form-radio-group.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+
+	type $$Props = RadioGroupPrimitive.Props;
+	const { attrStore, setValue, name, value } = getFormField();
+
+	export let onValueChange: $$Props['onValueChange'] = undefined;
+</script>
+
+<RadioGroup.Root
+	{...$attrStore}
+	onValueChange={(v) => {
+		onValueChange?.(v);
+		setValue(v);
+	}}
+	{...$$restProps}
+>
+	<slot />
+	<input hidden {name} value={$value} />
+</RadioGroup.Root>

src/lib/components/ui/form/form-select-trigger.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import * as Select from '$lib/components/ui/select';
+	import type { Select as SelectPrimitive } from 'bits-ui';
+	import { getFormField } from 'formsnap';
+
+	type $$Props = SelectPrimitive.TriggerProps & {
+		placeholder?: string;
+	};
+	type $$Events = SelectPrimitive.TriggerEvents;
+	const { attrStore, value } = getFormField();
+	export let placeholder = '';
+</script>
+
+<Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown>
+	<slot value={$value}>
+		<Select.Value {placeholder} />
+	</slot>
+</Select.Trigger>

src/lib/components/ui/form/form-select.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import * as Select from '$lib/components/ui/select';
+	import { getFormField } from 'formsnap';
+	import type { Select as SelectPrimitive } from 'bits-ui';
+
+	type $$Props = SelectPrimitive.Props<unknown>;
+	const { setValue, name, value } = getFormField();
+	export let onSelectedChange: $$Props['onSelectedChange'] = undefined;
+</script>
+
+<Select.Root
+	onSelectedChange={(v) => {
+		onSelectedChange?.(v);
+		setValue(v ? v.value : undefined);
+	}}
+	{...$$restProps}
+>
+	<slot />
+	<input hidden {name} value={$value} />
+</Select.Root>

src/lib/components/ui/form/form-switch.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { Switch as SwitchPrimitive } from 'bits-ui';
+	import { Switch } from '$lib/components/ui/switch';
+	type $$Props = SwitchPrimitive.Props;
+	type $$Events = SwitchPrimitive.Events;
+
+	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
+
+	const { name, setValue, attrStore, value } = getFormField();
+</script>
+
+<Switch
+	{...$attrStore}
+	checked={typeof $value === 'boolean' ? $value : false}
+	onCheckedChange={(v) => {
+		onCheckedChange?.(v);
+		setValue(v);
+	}}
+	{...$$restProps}
+	on:click
+	on:keydown
+/>
+<input hidden {name} value={$value} />

src/lib/components/ui/form/form-textarea.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import type { TextareaGetFormField } from '.';
+	import { Textarea, type TextareaEvents } from '$lib/components/ui/textarea';
+
+	type $$Props = HTMLTextareaAttributes;
+	type $$Events = TextareaEvents;
+
+	const { attrStore, value } = getFormField() as TextareaGetFormField;
+</script>
+
+<Textarea
+	{...$attrStore}
+	bind:value={$value}
+	{...$$restProps}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+/>

src/lib/components/ui/form/form-validation.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Validation
+	class={cn('text-[0.8rem] font-medium text-destructive', className)}
+	{...$$restProps}
+/>

src/lib/components/ui/form/index.ts

@@ -0,0 +1,82 @@
+import { Form as FormPrimitive, getFormField } from 'formsnap';
+import type { Writable } from 'svelte/store';
+import * as RadioGroupComp from '$lib/components/ui/radio-group';
+import * as SelectComp from '$lib/components/ui/select';
+import Item from './form-item.svelte';
+import Input from './form-input.svelte';
+import Textarea from './form-textarea.svelte';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import Validation from './form-validation.svelte';
+import Checkbox from './form-checkbox.svelte';
+import Switch from './form-switch.svelte';
+import NativeSelect from './form-native-select.svelte';
+import RadioGroup from './form-radio-group.svelte';
+import Select from './form-select.svelte';
+import SelectTrigger from './form-select-trigger.svelte';
+import Button from './form-button.svelte';
+
+const Root = FormPrimitive.Root;
+const Field = FormPrimitive.Field;
+const Control = FormPrimitive.Control;
+const RadioItem = RadioGroupComp.Item;
+const NativeRadio = FormPrimitive.Radio;
+const SelectContent = SelectComp.Content;
+const SelectLabel = SelectComp.Label;
+const SelectGroup = SelectComp.Group;
+const SelectItem = SelectComp.Item;
+const SelectSeparator = SelectComp.Separator;
+
+export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, 'value'> & {
+	value: Writable<string>;
+};
+
+export {
+	Root,
+	Field,
+	Control,
+	Item,
+	Input,
+	Label,
+	Button,
+	Switch,
+	Select,
+	Checkbox,
+	Textarea,
+	Validation,
+	RadioGroup,
+	RadioItem,
+	Description,
+	SelectContent,
+	SelectLabel,
+	SelectGroup,
+	SelectItem,
+	SelectSeparator,
+	SelectTrigger,
+	NativeSelect,
+	NativeRadio,
+	//
+	Root as Form,
+	Field as FormField,
+	Control as FormControl,
+	Item as FormItem,
+	Input as FormInput,
+	Textarea as FormTextarea,
+	Description as FormDescription,
+	Label as FormLabel,
+	Validation as FormValidation,
+	NativeSelect as FormNativeSelect,
+	NativeRadio as FormNativeRadio,
+	Checkbox as FormCheckbox,
+	Switch as FormSwitch,
+	RadioGroup as FormRadioGroup,
+	RadioItem as FormRadioItem,
+	Select as FormSelect,
+	SelectContent as FormSelectContent,
+	SelectLabel as FormSelectLabel,
+	SelectGroup as FormSelectGroup,
+	SelectItem as FormSelectItem,
+	SelectSeparator as FormSelectSeparator,
+	SelectTrigger as FormSelectTrigger,
+	Button as FormButton
+};