more

huntabyte · Feb 20, 2024 · 7bf86a7 · 7bf86a7
1 parent bc97396
commit 7bf86a7
Show file tree

Hide file tree

Showing 25 changed files with 641 additions and 559 deletions.
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -62,7 +62,7 @@
 		"rimraf": "^4.4.1",
 		"shiki": "^1.1.5",
 		"svelte": "^4.2.11",
-		"svelte-check": "^3.5.2",
+		"svelte-check": "^3.6.4",
 		"sveltekit-superforms": "^2.3.0",
 		"tailwind-variants": "^0.1.20",
 		"tailwindcss": "^3.4.1",

diff --git a/apps/www/pnpm-lock.yaml b/apps/www/pnpm-lock.yaml
diff --git a/apps/www/src/lib/components/docs/forms/form-preview.svelte b/apps/www/src/lib/components/docs/forms/form-preview.svelte
@@ -4,9 +4,9 @@
 	import type { FormSchema } from "@/registry/default/example/form-demo.svelte";
 	import DefaultFormDemo from "@/registry/default/example/form-demo.svelte";
 	import NewYorkFormDemo from "@/registry/new-york/example/form-demo.svelte";
-	import type { SuperValidated } from "sveltekit-superforms";
+	import type { SuperValidated, Infer } from "sveltekit-superforms";
 
-	export let form: SuperValidated<FormSchema>;
+	export let form: SuperValidated<Infer<FormSchema>>;
 </script>
 
 <ComponentPreviewManual>

diff --git a/apps/www/src/lib/registry/default/example/radio-group-form.svelte b/apps/www/src/lib/registry/default/example/radio-group-form.svelte
@@ -12,40 +12,44 @@
 <script lang="ts">
 	import { page } from "$app/stores";
 	import * as Form from "@/registry/default/ui/form";
-	// Since the labels used in each radio item don't represent the field
-	// we need to use a regular label component instead of Form.Label
-	import { Label } from "@/registry/default/ui/label";
-	import type { SuperValidated } from "sveltekit-superforms";
-	export let form: SuperValidated<FormSchema> = $page.data.radioGroup;
+	import * as RadioGroup from "@/registry/default/ui/radio-group";
+	import { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
+	import { zodClient } from "sveltekit-superforms/adapters";
+
+	let data: SuperValidated<Infer<FormSchema>> = $page.data.radioGroup;
+	export { data as form };
+
+	const form = superForm(data, {
+		validators: zodClient(formSchema),
+	});
+
+	const { form: formData, enhance } = form;
 </script>
 
-<Form.Root
-	{form}
-	schema={formSchema}
-	let:config
-	method="POST"
-	action="?/radioGroup"
-	class="w-2/3 space-y-6"
->
-	<Form.Field {config} name="type">
-		<Form.Item class="space-y-3">
-			<Form.Label>Notify me about...</Form.Label>
-			<Form.RadioGroup class="flex flex-col space-y-1">
-				<Form.Item class="flex items-center space-x-3 space-y-0">
-					<Form.RadioItem value="all" id="all" />
-					<Label for="all" class="font-normal">All new messages</Label>
-				</Form.Item>
-				<Form.Item class="flex items-center space-x-3 space-y-0">
-					<Form.RadioItem value="mentions" id="mentions" />
-					<Label for="mentions" class="font-normal">Direct messages and mentions</Label>
-				</Form.Item>
-				<Form.Item class="flex items-center space-x-3 space-y-0">
-					<Form.RadioItem value="none" id="none" />
-					<Label for="none" class="font-normal">Nothing</Label>
-				</Form.Item>
-			</Form.RadioGroup>
-			<Form.Validation />
-		</Form.Item>
-	</Form.Field>
+<form method="POST" action="?/radioGroup" class="w-2/3 space-y-6" use:enhance>
+	<Form.Fieldset {form} name="type" class="space-y-3">
+		<Form.Legend>Notify me about...</Form.Legend>
+		<RadioGroup.Root bind:value={$formData.type} class="flex flex-col space-y-1">
+			<div class="flex items-center space-x-3 space-y-0">
+				<Form.Control let:attrs>
+					<RadioGroup.Item value="all" {...attrs} />
+					<Form.Label class="font-normal">All new messages</Form.Label>
+				</Form.Control>
+			</div>
+			<div class="flex items-center space-x-3 space-y-0">
+				<Form.Control let:attrs>
+					<RadioGroup.Item value="mentions" {...attrs} />
+					<Form.Label class="font-normal">Direction messages and mentions</Form.Label>
+				</Form.Control>
+			</div>
+			<div class="flex items-center space-x-3 space-y-0">
+				<Form.Control let:attrs>
+					<RadioGroup.Item value="none" {...attrs} />
+					<Form.Label class="font-normal">Nothing</Form.Label>
+				</Form.Control>
+			</div>
+		</RadioGroup.Root>
+		<Form.FieldErrors />
+	</Form.Fieldset>
 	<Form.Button>Submit</Form.Button>
-</Form.Root>
+</form>
diff --git a/apps/www/src/lib/registry/default/example/switch-form.svelte b/apps/www/src/lib/registry/default/example/switch-form.svelte
@@ -10,44 +10,60 @@
 <script lang="ts">
 	import { page } from "$app/stores";
 	import * as Form from "@/registry/default/ui/form";
-	import type { SuperValidated } from "sveltekit-superforms";
-	export let form: SuperValidated<FormSchema> = $page.data.switch;
+	import { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
+	import { Switch } from "@/registry/default/ui/switch";
+	import { zodClient } from "sveltekit-superforms/adapters";
+	let data: SuperValidated<Infer<FormSchema>> = $page.data.switch;
+	export { data as form };
+
+	const form = superForm(data, {
+		validators: zodClient(formSchema),
+	});
+
+	const { form: formData, enhance } = form;
 </script>
 
-<Form.Root
-	{form}
-	schema={formSchema}
-	let:config
-	method="POST"
-	action="?/switch"
-	class="w-full space-y-6"
->
+<form method="POST" action="?/switch" class="w-full space-y-6" use:enhance>
 	<fieldset>
 		<legend class="mb-4 text-lg font-medium"> Email Notifications </legend>
 		<div class="space-y-4">
-			<Form.Field {config} name="marketing_emails">
-				<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
+			<Form.Field
+				{form}
+				name="marketing_emails"
+				class="flex flex-row items-center justify-between rounded-lg border p-4"
+			>
+				<Form.Control let:attrs>
 					<div class="space-y-0.5">
 						<Form.Label>Marketing emails</Form.Label>
 						<Form.Description>
 							Receive emails about new products, features, and more.
 						</Form.Description>
 					</div>
-					<Form.Switch />
-				</Form.Item>
+					<Switch includeInput {...attrs} bind:checked={$formData.marketing_emails} />
+				</Form.Control>
 			</Form.Field>
-			<Form.Field {config} name="security_emails">
-				<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
+			<Form.Field
+				{form}
+				name="security_emails"
+				class="flex flex-row items-center justify-between rounded-lg border p-4"
+			>
+				<Form.Control let:attrs>
 					<div class="space-y-0.5">
 						<Form.Label>Security emails</Form.Label>
 						<Form.Description>
 							Receive emails about your account security.
 						</Form.Description>
 					</div>
-					<Form.Switch aria-readonly disabled />
-				</Form.Item>
+					<Switch
+						{...attrs}
+						aria-readonly
+						disabled
+						includeInput
+						bind:checked={$formData.security_emails}
+					/>
+				</Form.Control>
 			</Form.Field>
 		</div>
 	</fieldset>
 	<Form.Button>Submit</Form.Button>
-</Form.Root>
+</form>
diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/form-description.svelte b/apps/www/src/lib/registry/new-york/ui/super-form/form-description.svelte
diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/form-field.svelte b/apps/www/src/lib/registry/new-york/ui/super-form/form-field.svelte
diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/form-label.svelte b/apps/www/src/lib/registry/new-york/ui/super-form/form-label.svelte
diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/form-message.svelte b/apps/www/src/lib/registry/new-york/ui/super-form/form-message.svelte