input.svelte RawHistoryFolder

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