rearrange shadcn-svelte to own components.

apps/svelte-gravity-forms/src/lib/components/button/index.ts

@@ -52,7 +52,7 @@ export {
 	type Events,
 	type ButtonType,
 	//
-	Root as GFButton,
+	Root as Button,
 	type Props as ButtonProps,
 	type Events as ButtonEvents,
 	buttonVariants

apps/svelte-gravity-forms/src/lib/components/description/description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from 'formsnap';
+	import { cn } from '$lib/utils.js';
+	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-muted-foreground text-sm', className)} {...$$restProps}>
+	<slot />
+</FormPrimitive.Description>

apps/svelte-gravity-forms/src/lib/components/description/index.ts

@@ -0,0 +1,7 @@
+import Root from './description.svelte';
+
+export {
+	Root,
+	//
+	Root as Description
+};

apps/svelte-gravity-forms/src/lib/components/form/index.ts

@@ -1 +1,66 @@
-export { default as Form } from './form.svelte';
+import { Form as FormPrimitive, getFormField } from 'formsnap';
+import * as RadioGroupComp from '$lib/components/ui/radio-group/index.js';
+import * as SelectComp from '$lib/components/ui/select/index.js';
+import type { Writable } from 'svelte/store';
+import { Item } from '$components/item/index.js';
+import { Input } from '$components/input/index.js';
+import { Description } from '$components/description/index.js';
+import { Label } from '$components/label/index.js';
+import { Validation } from '$components/validation/index.js';
+
+import { Button } from '$components/button/index.js';
+
+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 type Props = {
+	formId?: number;
+};
+
+export {
+	Root,
+	Field,
+	Control,
+	Item,
+	Input,
+	Label,
+	Button,
+	Validation,
+	RadioItem,
+	Description,
+	SelectContent,
+	SelectLabel,
+	SelectGroup,
+	SelectItem,
+	SelectSeparator,
+	NativeRadio,
+	//
+	Root as Form,
+	Field as FormField,
+	Control as FormControl,
+	Item as FormItem,
+	Input as FormInput,
+	Description as FormDescription,
+	Label as FormLabel,
+	Validation as FormValidation,
+	NativeRadio as FormNativeRadio,
+	RadioItem as FormRadioItem,
+	SelectContent as FormSelectContent,
+	SelectLabel as FormSelectLabel,
+	SelectGroup as FormSelectGroup,
+	SelectItem as FormSelectItem,
+	SelectSeparator as FormSelectSeparator,
+	Button as FormButton
+};

apps/svelte-gravity-forms/src/lib/components/index.ts

@@ -1,4 +1,3 @@
-import { default as GFForm } from './form/form.svelte';
 import { default as GFButton } from './button/button.svelte';
 
 export { GFForm, GFButton };

apps/svelte-gravity-forms/src/lib/components/input/index.ts

@@ -0,0 +1,25 @@
+import Root from './input.svelte';
+
+type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input
+};

apps/svelte-gravity-forms/src/lib/components/input/input.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+	import type { InputEvents } from './index.js';
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	/* 	const { attrStore, value } = getFormField(); */
+	const { attrStore, value } = getFormField();
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<input
+	class={cn(
+		'border-input ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border bg-transparent px-3  py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	{...$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
+/>

apps/svelte-gravity-forms/src/lib/components/item/index.ts

@@ -0,0 +1,7 @@
+import Root from './item.svelte';
+
+export {
+	Root,
+	//
+	Root as Item
+};

apps/svelte-gravity-forms/src/lib/components/item/item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	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>

apps/svelte-gravity-forms/src/lib/components/label/index.ts

@@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+	Root,
+	//
+	Root as Label
+};

apps/svelte-gravity-forms/src/lib/components/label/label.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { getFormField } from 'formsnap';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = LabelPrimitive.Props;
+	type $$Events = LabelPrimitive.Events;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+
+	const { errors } = getFormField();
+
+	$: className = $errors ? cn($errors && 'text-destructive', className) : className;
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+		className
+	)}
+	{...$$restProps}
+	on:mousedown
+>
+	<slot />
+</LabelPrimitive.Root>