Implement required prop for SingleFileInput

Author: jpenilla

web/src/lib/components/files/MultimodalFileInput.svelte

@@ -111,17 +111,8 @@
     {/if}
 </div>
 
-<!-- TODO: Implement required prop for SingleFileInput -->
 {#snippet fileInput()}
-    <SingleFileInput bind:file={instance.file} class="flex w-fit items-center gap-2 rounded-md border btn-ghost px-2 py-1 has-focus-visible:outline-2">
-        <span class="iconify size-4 shrink-0 text-em-disabled octicon--file-16"></span>
-        {#if instance.file}
-            {instance.file.name}
-        {:else}
-            <span class="font-light">{label}</span>
-        {/if}
-        <span class="iconify size-4 shrink-0 text-em-disabled octicon--triangle-down-16"></span>
-    </SingleFileInput>
+    <SingleFileInput required bind:file={instance.file} />
 {/snippet}
 
 {#snippet urlInput()}

web/src/lib/components/files/SingleFileInput.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-    import { useId } from "bits-ui";
-    import { type RestProps } from "$lib/types";
-    import { type Snippet } from "svelte";
     import { watch } from "runed";
 
     type Props = {
-        children?: Snippet<[{ file?: File }]>;
+        label?: string;
+        required?: boolean;
         file?: File;
-    } & RestProps;
+    };
 
-    let { children, file = $bindable<File | undefined>(undefined), ...restProps }: Props = $props();
+    let { label = "File", required = false, file = $bindable<File | undefined>(undefined) }: Props = $props();
 
     let files = $state<FileList | undefined>();
 
@@ -22,11 +20,18 @@
         },
     );
 
-    const labelId = useId();
-    const inputId = useId();
+    const uid = $props.id();
+    const labelId = `${uid}-label`;
+    const inputId = `${uid}-input`;
 </script>
 
-<label id={labelId} for={inputId} {...restProps}>
-    {@render children?.({ file })}
-    <input id={inputId} aria-labelledby={labelId} type="file" bind:files class="sr-only" />
+<label id={labelId} for={inputId} class="relative flex w-fit items-center gap-2 rounded-md border btn-ghost px-2 py-1 has-focus-visible:outline-2">
+    <span class="iconify size-4 shrink-0 text-em-disabled octicon--file-16"></span>
+    {#if file}
+        {file.name}
+    {:else}
+        <span class="font-light">{label}</span>
+    {/if}
+    <span class="iconify size-4 shrink-0 text-em-disabled octicon--triangle-down-16"></span>
+    <input id={inputId} aria-labelledby={labelId} type="file" {required} bind:files class="absolute top-0 left-0 size-full opacity-0" />
 </label>