aria.lgbt
Keep track of ICE and police locations in your city. Very much a work-in-progress and not ready yet, stay tuned I guess?
1<script lang="ts">
2 import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
3 import { cn, type WithElementRef } from "$lib/utils/cn.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-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] 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-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] 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}