From 5d3a51bca9b572c1884c2428e500d1be584ce992 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 21 Aug 2025 11:58:34 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20input=20UI=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/input/index.ts        |  4 +++
 src/components/ui/input/input.styles.ts |  7 +++++
 src/components/ui/input/input.svelte    | 38 +++++++++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 src/components/ui/input/index.ts
 create mode 100644 src/components/ui/input/input.styles.ts
 create mode 100644 src/components/ui/input/input.svelte

diff --git a/src/components/ui/input/index.ts b/src/components/ui/input/index.ts
new file mode 100644
index 0000000..8e038bd
--- /dev/null
+++ b/src/components/ui/input/index.ts
@@ -0,0 +1,4 @@
+import Root from "./input.svelte";
+import { inputStyles } from "./input.styles";
+
+export { Root, Root as Input, inputStyles };
diff --git a/src/components/ui/input/input.styles.ts b/src/components/ui/input/input.styles.ts
new file mode 100644
index 0000000..3fd20ba
--- /dev/null
+++ b/src/components/ui/input/input.styles.ts
@@ -0,0 +1,7 @@
+import { cn } from "@/utils/cn";
+
+export const inputStyles = cn(
+  "flex h-9 w-full min-w-0 rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-neutral-900 selection:text-neutral-50 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:bg-neutral-200/30 dark:dark:bg-neutral-800/30 dark:selection:bg-neutral-50 dark:selection:text-neutral-900 dark:file:text-neutral-50 dark:placeholder:text-neutral-400",
+  "focus-visible:border-neutral-950 focus-visible:ring-[3px] focus-visible:ring-neutral-950/50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50",
+  "aria-invalid:border-red-500 aria-invalid:ring-red-500/20 dark:aria-invalid:border-red-900 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40",
+);
diff --git a/src/components/ui/input/input.svelte b/src/components/ui/input/input.svelte
new file mode 100644
index 0000000..5136823
--- /dev/null
+++ b/src/components/ui/input/input.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type {
+    HTMLInputAttributes,
+    HTMLInputTypeAttribute,
+  } from "svelte/elements";
+  import type { WithElementRef } from "@/types/components";
+
+  import { cn } from "@/utils/cn";
+  import { inputStyles } from "./input.styles";
+
+  type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+  type Props = WithElementRef<
+    Omit<HTMLInputAttributes, "type"> &
+      (
+        | { type: "file"; files?: FileList }
+        | { type?: InputType; files?: undefined }
+      )
+  >;
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    files = $bindable(),
+    class: className,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<input
+  bind:this={ref}
+  data-slot="input"
+  class={cn(inputStyles, className)}
+  {type}
+  bind:value
+  {...restProps}
+/>