initial commit

src/components/input/Input.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    id?: string;
+    type?: 'color' | 'date' | 'tel' | 'text' | 'email';
+    value?: string | null;
+    label?: string;
+    required?: boolean;
+    validation?: {
+      min?: string;
+      max?: string;
+      pattern?: string;
+      hint: string;
+    };
+    hidden?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+
+    size?: 'sm';
+    dynamicWidth?: boolean;
+
+    notice?: Snippet;
+  }
+
+  let {
+    id,
+    type,
+    value = $bindable(),
+    label,
+    required,
+    validation,
+    hidden,
+    readonly,
+    disabled,
+    size,
+    dynamicWidth,
+    notice
+  }: Props = $props();
+</script>
+
+<fieldset class="fieldset" {hidden}>
+  <legend class="fieldset-legend">
+    <span>
+      {label}
+      {#if required}
+        <span class="text-red-700">*</span>
+      {/if}
+    </span>
+  </legend>
+  <input
+    {id}
+    name={id}
+    bind:value
+    class="input"
+    class:input-sm={size === 'sm'}
+    class:validator={required || validation}
+    class:w-full={dynamicWidth}
+    type={type || 'text'}
+    min={validation?.min}
+    max={validation?.max}
+    required={required ? true : null}
+    pattern={validation?.pattern}
+    readonly={readonly ? true : null}
+    disabled={disabled ? true : null}
+  />
+  <p class="fieldset-label">
+    {#if notice}
+      {@render notice()}
+    {/if}
+  </p>
+  {#if validation}
+    <p class="validator-hint mt-0">{validation.hint}</p>
+  {/if}
+</fieldset>