diff --git a/components/auth/LoginForm.vue b/components/auth/LoginForm.vue
new file mode 100644
index 0000000..8903bf1
--- /dev/null
+++ b/components/auth/LoginForm.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { zodResolver } from "@primevue/forms/resolvers/zod"
+import { AuthError } from "@supabase/supabase-js"
+import { z } from "zod"
+
+const authStore = useAuthStore()
+const router = useRouter()
+
+const toast = useToast()
+const isLoading = ref(false)
+
+const formData = reactive({
+  email: "",
+  password: "",
+})
+
+async function handleSignIn({ valid, values }: { valid: boolean; values: Record<string, string> }) {
+  if (!valid) return
+
+  isLoading.value = true
+  try {
+    const { email, password } = values
+    const error = await authStore.handleSignIn(email, password)
+    if (error) throw error
+
+    router.push("/")
+  } catch (err) {
+    console.error(err)
+
+    let detail = "Ada sebuah kesalahan saat mendaftar. Silahkan coba lagi"
+    if (err instanceof AuthError) {
+      if (err.message === "Invalid login credentials") {
+        detail = "email atau password salah."
+      }
+    }
+
+    toast.add({
+      severity: "error",
+      summary: "Gagal masuk!",
+      detail,
+      life: 10000,
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const isForgotPasswordOpen = ref(false)
+const isRecoveryEmailSent = ref(false)
+
+async function handleForgotPasword() {
+  isLoading.value = true
+
+  try {
+    await authStore.handleForgotPassword(formData.email)
+    isRecoveryEmailSent.value = true
+  } catch (err) {
+    console.error(err)
+
+    toast.add({
+      severity: "error",
+      summary: "gagal mengirim email!",
+      detail: "ada kesalahan saat mengirim email. Silahkan coba lagi",
+      life: 10000,
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const resolver = zodResolver(
+  z.object({
+    email: z
+      .string()
+      .nonempty("email tidak boleh kosong.")
+      .email("ini bukan email. Yang bener donk."),
+    password: z
+      .string()
+      .nonempty("password kamu gak mungkin kosong.")
+      .min(7, "password harus lebih dari atau sama dengan 8 karakter."),
+  })
+)
+</script>
+
+<template>
+  <section class="flex flex-col gap-4 flex-auto max-w-xl main-section">
+    <header>
+      <h1 class="text-center">
+        <span>Masuk</span>
+      </h1>
+      <p class="text-center m-0">Masuk ke akun Metschoo Library yang sudah anda miliki!</p>
+    </header>
+
+    <div class="flex-1">
+      <Form
+        v-slot="$form"
+        class="flex flex-col gap-2"
+        :resolver
+        :initial-values="formData"
+        :validate-on-value-update="false"
+        :validate-on-blur="false"
+        :validate-on-submit="true"
+        @submit="handleSignIn"
+      >
+        <label for="email">Email</label>
+        <InputText id="email" name="email" placeholder="Email" autocomplete="off" />
+
+        <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">
+          {{ $form.email.error.message }}
+        </Message>
+
+        <label for="password">Password</label>
+        <Password
+          fluid
+          toggle-mask
+          input-id="password"
+          name="password"
+          placeholder="Password Anda"
+          :feedback="false"
+        />
+
+        <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">
+          {{ $form.password.error.message }}
+        </Message>
+
+        <CTA type="submit" label="Masuk" :disabled="isLoading" />
+        <CTA type="button" label="lupa password?" text @click="isForgotPasswordOpen = true" />
+      </Form>
+    </div>
+
+    <Dialog
+      v-model:visible="isForgotPasswordOpen"
+      modal
+      header="Lupa password"
+      class="mx-4 max-w-xl"
+    >
+      <p v-show="!isRecoveryEmailSent">
+        Masukkan emailmu, dan kami akan mengirimkan link untuk mengganti passwordmu.
+      </p>
+      <p v-show="isRecoveryEmailSent">
+        Email terkirim! setelah kamu klik linknya, kamu bisa menutup tab ini.
+      </p>
+
+      <form class="flex gap-4 flex-wrap" @submit.prevent="handleForgotPasword">
+        <InputText
+          id="recovery-email"
+          v-model="formData.email"
+          type="email"
+          name="recovery-email"
+          placeholder="email kamu"
+          autocomplete="off"
+          class="flex-grow"
+          required
+        />
+
+        <CTA
+          type="submit"
+          :label="isLoading ? 'sebentar ya...' : 'Kirim email'"
+          fill
+          :loading="isLoading"
+        />
+      </form>
+    </Dialog>
+
+    <Toast />
+  </section>
+</template>
diff --git a/components/auth/SignInForm.vue b/components/auth/SignInForm.vue
new file mode 100644
index 0000000..6ae38a4
--- /dev/null
+++ b/components/auth/SignInForm.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import InputText from "primevue/inputtext"
+import Password from "primevue/password"
+import type { SignUpData } from "@/types"
+import { zodResolver } from "@primevue/forms/resolvers/zod"
+import { z } from "zod"
+
+const isLoading = ref(false)
+
+const formData = ref<SignUpData>({
+  nama: "",
+  email: "",
+  phoneNumber: "",
+  password: "",
+  confirmPassword: "",
+})
+
+const schema = z.object({
+  nama: z.string().nonempty("namamu ga mungkin kosong bre."),
+  email: z.string().nonempty("emailmu ga mungkin kosong bre.").email("ini bukan email."),
+  phoneNumber: z
+    .string()
+    .regex(/^08\d{10,14}$/, "nomor HP kamu harus diawali 08 dan memiliki 10 sampai 14 angka."),
+  password: z.string().min(8, "password kamu minimal harus 8 karakter atau lebih."),
+  confirmPassword: z.string().nonempty("kamu lupa ngetik konfirmasi password."),
+})
+
+const resolver = zodResolver(schema)
+
+const authStore = useAuthStore()
+const toast = useToast()
+
+const formState = computed(() => {
+  return {
+    password: {
+      isStrong: formData.value.password.length >= 8,
+      isConfirmed: formData.value.confirmPassword === formData.value.password,
+    },
+    phone: phoneIsValid(formData.value.phoneNumber),
+  }
+})
+
+async function handleSignUp({ valid, values }: { valid: boolean; values: Record<string, string> }) {
+  if (!valid) return
+
+  const { nama, email, phoneNumber, password } = values
+
+  isLoading.value = true
+  try {
+    const error = await authStore.handleSignUp({ nama, email, phoneNumber, password })
+    if (error) throw error
+
+    alert("Cek email lu ya buat verifikasi email!")
+  } catch (err) {
+    console.error(err)
+
+    toast.add({
+      severity: "error",
+      summary: "Gagal mendaftar!",
+      detail: "Ada sebuah kesalahan saat mendaftar. Silahkan coba lagi",
+      life: 10000,
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="flex flex-col gap-4 flex-auto max-w-xl main-section">
+    <header>
+      <h1 class="text-center">
+        <span>Daftar</span>
+      </h1>
+      <p class="text-center m-0">Buat akun Metschoo Library yang baru!</p>
+    </header>
+
+    <div class="flex-1">
+      <Form
+        v-slot="$form"
+        :initial-values="formData"
+        :resolver="resolver"
+        :validate-on-value-update="false"
+        :validate-on-submit="true"
+        :validateon-blur="true"
+        class="flex flex-col gap-2"
+        @submit="handleSignUp"
+      >
+        <label for="nama">Nama</label>
+        <InputText id="nama" type="text" name="nama" placeholder="Siapa namamu?" />
+
+        <Message v-if="$form.nama?.invalid" severity="error" size="small" variant="simple">
+          {{ $form.nama?.error.message }}
+        </Message>
+
+        <label for="signup-email">Email</label>
+        <InputText id="signup-email" name="email" placeholder="Email" />
+
+        <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">
+          {{ $form.email?.error.message }}
+        </Message>
+
+        <label for="signup-number">No. HP</label>
+        <InputText
+          id="signup-number"
+          type="text"
+          name="phoneNumber"
+          :invalid="!formState.phone.isValid"
+          placeholder="0878 kapan kapan kita ke dufan"
+        />
+
+        <Message v-if="$form.phoneNumber?.invalid" severity="error" size="small" variant="simple">
+          {{ $form.phoneNumber?.error.message }}
+        </Message>
+
+        <label for="signup-password">Password</label>
+        <Password
+          name="password"
+          fluid
+          input-id="signup-password"
+          toggle-mask
+          placeholder="Password Anda"
+          aria-describedby="weak-password-help"
+        />
+
+        <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">
+          {{ $form.password?.error.message }}
+        </Message>
+
+        <label for="confirm-password">Konfirmasi Password</label>
+        <Password
+          fluid
+          input-id="confirm-password"
+          name="confirmPassword"
+          toggle-mask
+          placeholder="Ketik Ulang Password"
+          aria-describedby="unconfirmed-password-help"
+          :feedback="false"
+        />
+
+        <Message
+          v-if="$form.confirmPassword?.invalid"
+          severity="error"
+          size="small"
+          variant="simple"
+        >
+          {{ $form.confirmPassword?.error.message }}
+        </Message>
+
+        <Message
+          v-if="
+            !$form.confirmPassword?.invalid &&
+            $form.confirmPassword?.value !== $form.password?.value
+          "
+          severity="error"
+          size="small"
+          variant="simple"
+        >
+          Mohon konfirmasi password kamu, ngetiknya yang bener.
+        </Message>
+
+        <CTA type="submit" label="Daftar" class="block" :loading="isLoading" />
+      </Form>
+    </div>
+
+    <Toast />
+  </section>
+</template>
+
+<style scoped>
+form label {
+  @apply mt-2;
+}
+</style>
diff --git a/components/signIn/SignInForm.vue b/components/signIn/SignInForm.vue
deleted file mode 100644
index 8203bae..0000000
--- a/components/signIn/SignInForm.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<script setup lang="ts">
-import InputText from "primevue/inputtext"
-import Password from "primevue/password"
-import Dialog from "primevue/dialog"
-import { AuthError } from "@supabase/supabase-js"
-import type { SignUpData } from "@/types"
-
-const isSigningIn = ref(false)
-const buttonLabel = computed(() =>
-  isSigningIn.value ? "Belum punya akun? Daftar" : "Sudah punya akun? Masuk"
-)
-
-const title = computed(() => (isSigningIn.value ? "Log in" : "Sign in"))
-
-// title used in /login
-useHead({
-  title: title,
-})
-
-const isLoading = ref(false)
-
-function handleSwitchForm() {
-  isSigningIn.value = !isSigningIn.value
-}
-
-const data = ref<SignUpData>({
-  nama: "",
-  email: "",
-  phoneNumber: "",
-  password: "",
-  confirmPassword: "",
-})
-
-const authStore = useAuthStore()
-const router = useRouter()
-
-const toast = useToast()
-
-const formState = computed(() => {
-  return {
-    password: {
-      isStrong: data.value.password.length >= 8,
-      isConfirmed: data.value.confirmPassword === data.value.password,
-    },
-    phone: phoneIsValid(data.value.phoneNumber),
-  }
-})
-
-async function handleSignIn() {
-  isLoading.value = true
-  try {
-    const error = await authStore.handleSignIn(data.value.email, data.value.password)
-    if (error) throw error
-    router.push("/")
-  } catch (err) {
-    console.error(err)
-
-    let detail = "Ada sebuah kesalahan saat mendaftar. Silahkan coba lagi"
-    if (err instanceof AuthError) {
-      if (err.message === "Invalid login credentials") {
-        detail = "email atau password salah."
-      }
-    }
-
-    toast.add({
-      severity: "error",
-      summary: "Gagal masuk!",
-      detail,
-      life: 10000,
-    })
-  } finally {
-    isLoading.value = false
-  }
-}
-
-async function handleSignUp() {
-  const { nama, email, phoneNumber, password } = data.value
-
-  isLoading.value = true
-  try {
-    const error = await authStore.handleSignUp({ nama, email, phoneNumber, password })
-    if (error) throw error
-
-    alert("Cek email lu ya buat verifikasi email!")
-  } catch (err) {
-    console.error(err)
-
-    toast.add({
-      severity: "error",
-      summary: "Gagal mendaftar!",
-      detail: "Ada sebuah kesalahan saat mendaftar. Silahkan coba lagi",
-      life: 10000,
-    })
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const isForgotPasswordOpen = ref(false)
-const isRecoveryEmailSent = ref(false)
-
-function forgotPassword() {
-  isForgotPasswordOpen.value = true
-}
-
-async function handleForgotPasword() {
-  isLoading.value = true
-
-  try {
-    await authStore.handleForgotPassword(data.value.email)
-    isRecoveryEmailSent.value = true
-  } catch (err) {
-    console.error(err)
-
-    toast.add({
-      severity: "error",
-      summary: "gagal mengirim email!",
-      detail: "ada kesalahan saat mengirim email. Silahkan coba lagi",
-      life: 10000,
-    })
-  } finally {
-    isLoading.value = false
-  }
-}
-</script>
-
-<template>
-  <section class="flex flex-col gap-4 flex-auto max-w-xl main-section">
-    <header>
-      <template v-if="isSigningIn">
-        <h1 v-if="isSigningIn" class="text-center">
-          <span>Masuk</span>
-        </h1>
-        <p class="text-center m-0">Masuk ke akun Metschoo Library yang sudah anda miliki!</p>
-      </template>
-
-      <template v-else>
-        <h1 class="text-center">
-          <span>Daftar</span>
-        </h1>
-        <p class="text-center m-0">Buat akun Metschoo Library yang baru!</p>
-      </template>
-    </header>
-
-    <div v-if="isSigningIn" class="flex-1">
-      <form class="flex flex-col gap-2" @submit.prevent="handleSignIn">
-        <label for="login-email">Email</label>
-        <InputText
-          id="login-email"
-          v-model="data.email"
-          required
-          type="email"
-          placeholder="Email"
-        />
-
-        <label for="login-password">Password</label>
-        <Password
-          v-model="data.password"
-          fluid
-          toggle-mask
-          input-id="login-password"
-          required
-          :invalid="!formState.password.isStrong"
-          placeholder="Password Anda"
-          :feedback="false"
-        />
-
-        <CTA type="submit" label="Masuk" :disabled="isLoading && !formState.password.isStrong" />
-        <CTA type="button" label="lupa password?" text @click="forgotPassword" />
-      </form>
-    </div>
-
-    <div v-else class="flex-1">
-      <form class="flex flex-col gap-2" @submit.prevent="handleSignUp">
-        <label for="nama">Nama</label>
-        <InputText
-          id="nama"
-          v-model="data.nama"
-          type="text"
-          name="nama"
-          placeholder="Siapa namamu?"
-          required
-        />
-
-        <label for="signup-email">Email</label>
-        <InputText
-          id="signup-email"
-          v-model="data.email"
-          required
-          type="email"
-          placeholder="Email"
-        />
-
-        <label for="signup-number">No. HP</label>
-        <InputText
-          id="signup-number"
-          v-model="data.phoneNumber"
-          type="text"
-          required
-          :invalid="!formState.phone.isValid"
-          placeholder="0878 kapan kapan kita ke dufan"
-          maxlength="14"
-        />
-
-        <span v-show="!formState.phone.isValid" class="text-sm text-red-400 dark:text-red-500">
-          {{ formState.phone.message }}
-        </span>
-
-        <label for="signup-password">Password</label>
-        <Password
-          v-model="data.password"
-          fluid
-          input-id="signup-password"
-          required
-          toggle-mask
-          :invalid="!formState.password.isStrong"
-          placeholder="Password Anda"
-          aria-describedby="weak-password-help"
-        />
-
-        <span
-          v-show="!formState.password.isStrong"
-          id="weak-password-help"
-          class="text-sm text-red-400 dark:text-red-500"
-        >
-          Password harus memiliki panjang 8 karakter atau lebih.
-        </span>
-
-        <label for="confirm-password">Konfirmasi Password</label>
-        <Password
-          v-model="data.confirmPassword"
-          fluid
-          input-id="confirm-password"
-          required
-          toggle-mask
-          :invalid="!formState.password.isConfirmed"
-          placeholder="Ketik Ulang Password"
-          aria-describedby="unconfirmed-password-help"
-          :feedback="false"
-        />
-
-        <span
-          v-show="!formState.password.isConfirmed"
-          id="unconfirmed-password-help"
-          class="text-sm text-red-400 dark:text-red-500"
-        >
-          Password tidak sama.
-        </span>
-
-        <CTA
-          type="submit"
-          label="Daftar"
-          class="block"
-          :disabled="isLoading || !formState.password.isStrong || !formState.password.isConfirmed"
-        />
-      </form>
-    </div>
-
-    <CTA :label="buttonLabel" text @click="handleSwitchForm" />
-    <Toast />
-
-    <Dialog
-      v-model:visible="isForgotPasswordOpen"
-      modal
-      header="Lupa password"
-      class="mx-4 max-w-xl"
-    >
-      <p v-show="!isRecoveryEmailSent">
-        Masukkan emailmu, dan kami akan mengirimkan link untuk mengganti passwordmu.
-      </p>
-      <p v-show="isRecoveryEmailSent">
-        Email terkirim! setelah kamu klik linknya, kamu bisa menutup tab ini.
-      </p>
-
-      <form class="flex gap-4 flex-wrap" @submit.prevent="handleForgotPasword">
-        <InputText
-          id="recovery-email"
-          v-model="data.email"
-          type="email"
-          name="recovery-email"
-          placeholder="email kamu"
-          autocomplete="off"
-          class="flex-grow"
-          required
-        />
-
-        <CTA type="submit" :label="isLoading ? 'sebentar ya...' : 'Kirim email'" fill />
-      </form>
-    </Dialog>
-  </section>
-</template>
-
-<style scoped>
-form label {
-  @apply mt-2;
-}
-</style>
diff --git a/package.json b/package.json
index 15b8625..253229e 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,12 @@
     "@nuxt/fonts": "^0.10.2",
     "@nuxt/image": "^1.7.0",
     "@pinia/nuxt": "^0.5.3",
+    "@primevue/forms": "^4.2.5",
     "primevue": "^4.2.0",
     "supabase": "^1.219.2",
     "tailwindcss-primeui": "^0.3.4",
-    "vue": "latest"
+    "vue": "latest",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@iconify-json/mdi": "^1.1.68",
diff --git a/pages/login.vue b/pages/login.vue
index 5023f13..6ae6147 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -10,9 +10,40 @@ definePageMeta({
     },
   ],
 })
+
+const isSigningIn = ref(false)
+
+function handleSwitchForm() {
+  isSigningIn.value = !isSigningIn.value
+}
+
+const title = computed(() => (isSigningIn.value ? "Log in" : "Sign in"))
+useHead({ title })
+
+const switchFormButtonLabel = computed(() =>
+  isSigningIn.value ? "Sudah punya akun? Masuk" : "Belum punya akun? ayo bikin dulu!"
+)
 </script>
+
 <template>
-  <div class="flex justify-center min-h-[70vh]">
-    <SignInForm />
+  <div class="flex flex-col gap-8 justify-center max-w-xl mx-auto min-h-[70vh]">
+    <CTA type="button" :label="switchFormButtonLabel" link @click="handleSwitchForm" />
+
+    <Transition>
+      <AuthSignInForm v-if="isSigningIn" />
+      <AuthLoginForm v-else />
+    </Transition>
   </div>
 </template>
+
+<style>
+.v-enter-leave,
+.v-enter-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef218ea..6fd25c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@pinia/nuxt':
         specifier: ^0.5.3
         version: 0.5.5(magicast@0.3.5)(rollup@4.27.2)(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3))
+      '@primevue/forms':
+        specifier: ^4.2.5
+        version: 4.2.5(vue@3.5.13(typescript@5.6.3))
       primevue:
         specifier: ^4.2.0
         version: 4.2.2(vue@3.5.13(typescript@5.6.3))
@@ -29,6 +32,9 @@ importers:
       vue:
         specifier: latest
         version: 3.5.13(typescript@5.6.3)
+      zod:
+        specifier: ^3.24.1
+        version: 3.24.1
     devDependencies:
       '@iconify-json/mdi':
         specifier: ^1.1.68
@@ -1135,14 +1141,26 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
+  '@primeuix/forms@0.0.2':
+    resolution: {integrity: sha512-DpecPQd/Qf/kav4LKCaIeGuT3AkwhJzuHCkLANTVlN/zBvo8KIj3OZHsCkm0zlIMVVnaJdtx1ULNlRQdudef+A==}
+    engines: {node: '>=12.11.0'}
+
   '@primeuix/styled@0.3.1':
     resolution: {integrity: sha512-MIPtektNrFwEKJU0qXrguoultADtxMC39ghwXIGP3DR3zsB7vWk6VhJ1Mo7TxgWsVi3kHnh6g5v9X50eMFcBHw==}
     engines: {node: '>=12.11.0'}
 
+  '@primeuix/styled@0.3.2':
+    resolution: {integrity: sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==}
+    engines: {node: '>=12.11.0'}
+
   '@primeuix/utils@0.3.1':
     resolution: {integrity: sha512-KFJ8FylTX2j3AN6AvkF8JGSUNb7Dtqz1T5mlZnINDb6bwW+/V/d5wISiMEdhzdso69mmOX7IlYUDsj0w0pvxvA==}
     engines: {node: '>=12.11.0'}
 
+  '@primeuix/utils@0.3.2':
+    resolution: {integrity: sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==}
+    engines: {node: '>=12.11.0'}
+
   '@primevue/auto-import-resolver@4.2.2':
     resolution: {integrity: sha512-tM4BSIaS3JTXsVLNm69L7ZD9IOUdzK4PzrS+9zyDqA+l5mPTb+KOBEPXLvYXi+0NE7bAluvx/MhmfRA8eGXXzQ==}
     engines: {node: '>=12.11.0'}
@@ -1153,6 +1171,16 @@ packages:
     peerDependencies:
       vue: ^3.3.0
 
+  '@primevue/core@4.2.5':
+    resolution: {integrity: sha512-+oWBIQs5dLd2Ini4KEVOlvPILk989EHAskiFS3R/dz3jeOllJDMZFcSp8V9ddV0R3yDaPdLVkfHm2Q5t42kU2Q==}
+    engines: {node: '>=12.11.0'}
+    peerDependencies:
+      vue: ^3.3.0
+
+  '@primevue/forms@4.2.5':
+    resolution: {integrity: sha512-5jarJQ9Qv32bOo/0tY5bqR3JZI6+YmmoUQ2mjhVSbVElQsE4FNfhT7a7JwF+xgBPMPc8KWGNA1QB248HhPNVAg==}
+    engines: {node: '>=12.11.0'}
+
   '@primevue/icons@4.2.2':
     resolution: {integrity: sha512-x0AwfjB94MoLsmNyQtSGgrEWhZ52SzRQ3X5hEUA30L7tdob66qYmiMKCnjfq2gvJIB477DwB7cxJZhaTxspsDw==}
     engines: {node: '>=12.11.0'}
@@ -5426,6 +5454,9 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -6673,12 +6704,22 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
+  '@primeuix/forms@0.0.2':
+    dependencies:
+      '@primeuix/utils': 0.3.2
+
   '@primeuix/styled@0.3.1':
     dependencies:
       '@primeuix/utils': 0.3.1
 
+  '@primeuix/styled@0.3.2':
+    dependencies:
+      '@primeuix/utils': 0.3.2
+
   '@primeuix/utils@0.3.1': {}
 
+  '@primeuix/utils@0.3.2': {}
+
   '@primevue/auto-import-resolver@4.2.2':
     dependencies:
       '@primevue/metadata': 4.2.2
@@ -6689,6 +6730,20 @@ snapshots:
       '@primeuix/utils': 0.3.1
       vue: 3.5.13(typescript@5.6.3)
 
+  '@primevue/core@4.2.5(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@primeuix/styled': 0.3.2
+      '@primeuix/utils': 0.3.2
+      vue: 3.5.13(typescript@5.6.3)
+
+  '@primevue/forms@4.2.5(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@primeuix/forms': 0.0.2
+      '@primeuix/utils': 0.3.2
+      '@primevue/core': 4.2.5(vue@3.5.13(typescript@5.6.3))
+    transitivePeerDependencies:
+      - vue
+
   '@primevue/icons@4.2.2(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@primeuix/utils': 0.3.1
@@ -11598,3 +11653,5 @@ snapshots:
       archiver-utils: 5.0.2
       compress-commons: 6.0.2
       readable-stream: 4.5.2
+
+  zod@3.24.1: {}