From f1b8ab29e488980002fe444e82a012052b7e23a6 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Wed, 20 Nov 2024 15:32:59 +0000
Subject: [PATCH] add shadcn input component

---
 app/src/lib/components/ui/input/index.ts     | 29 ++++++++++++++
 app/src/lib/components/ui/input/input.svelte | 42 ++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 app/src/lib/components/ui/input/index.ts
 create mode 100644 app/src/lib/components/ui/input/input.svelte

diff --git a/app/src/lib/components/ui/input/index.ts b/app/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..75e3bc2
--- /dev/null
+++ b/app/src/lib/components/ui/input/index.ts
@@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	mousemove: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+	wheel: FormInputEvent<WheelEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/app/src/lib/components/ui/input/input.svelte b/app/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..446230b
--- /dev/null
+++ b/app/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { InputEvents } from "./index.js";
+	import { cn } from "$lib/utils/ui.utils.js";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<input
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:paste
+	on:input
+	on:wheel|passive
+	{...$$restProps}
+/>