1<script lang="ts">
 2	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
 3	import { cn, type WithElementRef } from '$lib/components/ui/utils';
 4
 5	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
 6
 7	type Props = WithElementRef<
 8		Omit<HTMLInputAttributes, 'type'> &
 9			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
10	>;
11
12	let {
13		ref = $bindable(null),
14		value = $bindable(),
15		type,
16		files = $bindable(),
17		class: className,
18		...restProps
19	}: Props = $props();
20</script>
21
22{#if type === 'file'}
23	<input
24		bind:this={ref}
25		data-slot="input"
26		class={cn(
27			'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
28			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
29			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
30			className
31		)}
32		type="file"
33		bind:files
34		bind:value
35		{...restProps}
36	/>
37{:else}
38	<input
39		bind:this={ref}
40		data-slot="input"
41		class={cn(
42			'flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
43			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
44			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
45			className
46		)}
47		{type}
48		bind:value
49		{...restProps}
50	/>
51{/if}