fix broken form types

Author: oseughu

composer.lock

@@ -8,6 +8,7 @@
         "format": "prettier --write resources/",
         "format:check": "prettier --check resources/",
         "lint": "eslint . --fix",
+        "svelte:check": "svelte-check --tsconfig ./tsconfig.json",
         "shadcn:update": "npx shadcn-svelte update --all"
     },
     "devDependencies": {
@@ -54,11 +55,11 @@
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.49.0",
         "vaul-svelte": "^1.0.0-next.7",
-        "vite": "^7.2.7",
-        "zod": "^4.1.13"
+        "vite": "^7.3.0",
+        "zod": "^4.2.0"
     },
     "optionalDependencies": {
-        "@rollup/rollup-linux-x64-gnu": "4.53.3",
+        "@rollup/rollup-linux-x64-gnu": "4.53.4",
         "@tailwindcss/oxide-linux-x64-gnu": "^4.1.18",
         "lightningcss-linux-x64-gnu": "^1.30.2"
     }

package-lock.json

@@ -16,7 +16,7 @@
 </svelte:head>
 
 <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] dark:bg-[#0a0a0a] lg:justify-center lg:p-8">
-    <header class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl">
+    <header class="not-has-[nav]:hidden mb-6 w-full max-w-83.75ext-sm lg:max-w-4xl">
         <nav class="flex items-center justify-end gap-4">
             {#if user}
                 <Link
@@ -47,9 +47,9 @@
         </nav>
     </header>
     <div class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">
-        <main class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row">
+        <main class="flex w-full max-w-83.75 flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row">
             <div
-                class="flex-1 rounded-bl-lg rounded-br-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:rounded-br-none lg:rounded-tl-lg lg:p-20"
+                class="flex-1 rounded-bl-lg rounded-br-lg bg-white p-6 pb-12 text-[13px] leading-5 shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] lg:rounded-br-none lg:rounded-tl-lg lg:p-20"
             >
                 <h1 class="mb-1 font-medium">Let's get started</h1>
                 <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
@@ -121,7 +121,7 @@
                 </ul>
             </div>
             <div
-                class="relative -mb-px aspect-335/376 w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] dark:bg-[#1D0002] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-[438px] lg:rounded-r-lg lg:rounded-t-none"
+                class="relative -mb-px aspect-335/376 w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] dark:bg-[#1D0002] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-109.5 lg:rounded-r-lg lg:rounded-t-none"
             >
                 <svg
                     class="duration-750 starting:translate-y-6 starting:opacity-0 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
@@ -150,7 +150,7 @@
                     />
                 </svg>
                 <svg
-                    class="relative -ml-8 -mt-[4.9rem] w-[448px] max-w-none dark:hidden lg:-mt-[6.6rem] lg:ml-0"
+                    class="relative -ml-8 -mt-[4.9rem] w-md max-w-none dark:hidden lg:-mt-[6.6rem] lg:ml-0"
                     viewBox="0 0 440 376"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
@@ -470,7 +470,7 @@
                     </g>
                 </svg>
                 <svg
-                    class="relative -ml-8 -mt-[4.9rem] hidden w-[448px] max-w-none dark:block lg:-mt-[6.6rem] lg:ml-0"
+                    class="relative -ml-8 -mt-[4.9rem] hidden w-md max-w-none dark:block lg:-mt-[6.6rem] lg:ml-0"
                     viewBox="0 0 440 376"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"

package.json

@@ -4,6 +4,7 @@
     import { Input } from '@/components/ui/input';
     import { Label } from '@/components/ui/label';
     import AuthLayout from '@/layouts/AuthLayout.svelte';
+    import type { BaseFormSnippetProps } from '@/types/forms';
     import { Form } from '@inertiajs/svelte';
     import { LoaderCircle } from 'lucide-svelte';
 </script>
@@ -14,7 +15,7 @@
 
 <AuthLayout title="Confirm your password" description="This is a secure area of the application. Please confirm your password before continuing.">
     <Form method="post" action={route('password.confirm')} resetOnSuccess>
-        {#snippet children({ errors, processing }: { errors: Record<string, string>; processing: boolean })}
+        {#snippet children({ errors, processing }: BaseFormSnippetProps)}
             <div class="space-y-6">
                 <div class="grid gap-2">
                     <Label for="password">Password</Label>

resources/js/pages/Welcome.svelte

@@ -5,6 +5,7 @@
     import { Input } from '@/components/ui/input';
     import { Label } from '@/components/ui/label';
     import AuthLayout from '@/layouts/AuthLayout.svelte';
+    import type { BaseFormSnippetProps } from '@/types/forms';
     import { Form } from '@inertiajs/svelte';
     import { LoaderCircle } from 'lucide-svelte';
 
@@ -28,7 +29,7 @@
 
     <div class="space-y-6">
         <Form method="post" action={route('password.email')}>
-            {#snippet children({ errors, processing }: { errors: Record<string, string>; processing: boolean })}
+            {#snippet children({ errors, processing }: BaseFormSnippetProps)}
                 <div class="grid gap-2">
                     <Label for="email">Email address</Label>
                     <Input id="email" type="email" name="email" autocomplete="off" autofocus placeholder="email@example.com" />

resources/js/pages/auth/ConfirmPassword.svelte

@@ -4,6 +4,7 @@
     import { Input } from '@/components/ui/input';
     import { Label } from '@/components/ui/label';
     import AuthLayout from '@/layouts/AuthLayout.svelte';
+    import type { BaseFormSnippetProps } from '@/types/forms';
     import { Form } from '@inertiajs/svelte';
     import { LoaderCircle } from 'lucide-svelte';
 
@@ -26,7 +27,7 @@
         transform={(data) => ({ ...data, token, email })}
         resetOnSuccess={['password', 'password_confirmation']}
     >
-        {#snippet children({ errors, processing }: { errors: Record<string, string>; processing: boolean })}
+        {#snippet children({ errors, processing }: BaseFormSnippetProps)}
             <div class="grid gap-6">
                 <div class="grid gap-2">
                     <Label for="email">Email</Label>

resources/js/pages/auth/ForgotPassword.svelte

@@ -4,6 +4,7 @@
     import { Input } from '@/components/ui/input';
     import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
     import AuthLayout from '@/layouts/AuthLayout.svelte';
+    import type { BaseFormSnippetProps } from '@/types/forms';
     import { Form } from '@inertiajs/svelte';
 
     interface AuthConfigContent {
@@ -44,7 +45,7 @@
     <div class="space-y-6">
         {#if !showRecoveryInput}
             <Form method="post" action={route('two-factor.login')} class="space-y-4" resetOnError={true} onError={() => (code = '')}>
-                {#snippet children({ errors, processing, clearErrors }: { errors: Record<string, string>; processing: boolean; clearErrors: () => void })}
+                {#snippet children({ errors, processing, clearErrors }: BaseFormSnippetProps & { clearErrors: () => void })}
                     <input type="hidden" name="code" value={code} />
                     <div class="flex flex-col items-center justify-center space-y-3 text-center">
                         <div class="flex w-full items-center justify-center">
@@ -75,7 +76,7 @@
             </Form>
         {:else}
             <Form method="post" action={route('two-factor.login')} class="space-y-4" resetOnError={true}>
-                {#snippet children({ errors, processing, clearErrors }: { errors: Record<string, string>; processing: boolean; clearErrors: () => void })}
+                {#snippet children({ errors, processing, clearErrors }: BaseFormSnippetProps & { clearErrors: () => void })}
                     <Input name="recovery_code" type="text" placeholder="Enter recovery code" autofocus={showRecoveryInput} required />
                     <InputError message={errors.recovery_code} />
                     <Button type="submit" class="w-full" disabled={processing}>Continue</Button>

resources/js/pages/auth/ResetPassword.svelte

@@ -14,4 +14,4 @@
     return Inertia::render('Dashboard');
 })->middleware(['auth', 'verified'])->name('dashboard');
 
-require __DIR__.'/settings.php';
+require __DIR__ . '/settings.php';