Add first version of FormInput components

src/lib/FormInput.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import { Field, Control, FieldErrors } from "formsnap";
+  import type { FormPath, SuperForm } from "sveltekit-superforms";
+
+  let { form, type, label, name }: {
+    form: SuperForm<T>,
+    type: string,
+    label: string,
+    name: FormPath<T>,
+  } = $props();
+  const formData = form.form;
+
+</script>
+
+<div>
+  <Field {form} {name}>
+    <Control>
+      {#snippet children({ props })}
+        <label class="label floating-label w-full">
+          <span>{label}</span>
+          <input {type} class="input w-full aria-[invalid]:input-error" placeholder={label}
+                 bind:value={$formData[name]} {...props}
+          />
+        </label>
+      {/snippet}
+    </Control>
+    <FieldErrors>
+      {#snippet children({ errors, errorProps })}
+        {#each errors as err, idx (idx)}
+          <p class="text-error" {...errorProps}>{err}</p>
+        {/each}
+      {/snippet}
+    </FieldErrors>
+  </Field>
+</div>

src/lib/PwdFormInput.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import { Field, Control, FieldErrors } from "formsnap";
+  import type { FormPath, SuperForm } from "sveltekit-superforms";
+  import { scale } from 'svelte/transition';
+  import Icon from "@iconify/svelte";
+
+  let { form, label, name }: {
+    form: SuperForm<T>,
+    label: string,
+    name: FormPath<T>,
+  } = $props();
+  const formData = form.form;
+
+  let show = $state(false);
+  let type = $derived(show ? 'text' : 'password');
+</script>
+
+<div>
+  <Field {form} {name}>
+    <Control>
+      {#snippet children({ props })}
+        <div class="flex w-full gap-1">
+          <label class="label floating-label w-full">
+            <span>{label}</span>
+            <input {type} class="input w-full aria-[invalid]:input-error" placeholder={label}
+                   bind:value={$formData[name]} {...props}
+            />
+          </label>
+          <button class="btn btn-circle grid" onclick={() => show = !show} type="button">
+            {#if show}
+              <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2"><Icon
+                      icon="mdi:eye-off-outline"/></span>
+            {:else }
+              <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2"><Icon
+                      icon="mdi:eye-outline"/></span>
+            {/if}
+          </button>
+        </div>
+      {/snippet}
+    </Control>
+    <FieldErrors>
+      {#snippet children({ errors, errorProps })}
+        {#each errors as err, idx (idx)}
+          <p class="text-error" {...errorProps}>{err}</p>
+        {/each}
+      {/snippet}
+    </FieldErrors>
+  </Field>
+</div>