From 98a94e91ed4545b943ae5ae0c96b1d7c89e948fc Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 7 Feb 2026 18:01:48 +0300
Subject: [PATCH] feat(Input): create reusable input component

---
 src/shared/ui/Input/Input.stories.svelte | 42 ++++++++++++++++++
 src/shared/ui/Input/Input.svelte         | 54 ++++++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 src/shared/ui/Input/Input.stories.svelte
 create mode 100644 src/shared/ui/Input/Input.svelte

diff --git a/src/shared/ui/Input/Input.stories.svelte b/src/shared/ui/Input/Input.stories.svelte
new file mode 100644
index 0000000..7ad789b
--- /dev/null
+++ b/src/shared/ui/Input/Input.stories.svelte
@@ -0,0 +1,42 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Input from './Input.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Input',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Styles Input component',
+            },
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: "input's placeholder",
+        },
+        value: {
+            control: 'text',
+            description: "input's value",
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+let value = $state('Initial value');
+const placeholder = 'Enter text';
+</script>
+
+<Story
+    name="Default"
+    args={{
+        placeholder,
+        value,
+    }}
+>
+    <Input value={value} placeholder={placeholder} />
+</Story>
diff --git a/src/shared/ui/Input/Input.svelte b/src/shared/ui/Input/Input.svelte
new file mode 100644
index 0000000..6e7fd7c
--- /dev/null
+++ b/src/shared/ui/Input/Input.svelte
@@ -0,0 +1,54 @@
+<!--
+    Component: Input
+    Provides styled input component with all the shadcn input props
+-->
+<script lang="ts">
+import { Input } from '$shared/shadcn/ui/input';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { ComponentProps } from 'svelte';
+
+type Props = ComponentProps<typeof Input> & {
+    /**
+     * Current search value (bindable)
+     */
+    value: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    class?: string;
+};
+
+let {
+    value = $bindable(''),
+    class: className,
+    ...rest
+}: Props = $props();
+</script>
+
+<Input
+    bind:value={value}
+    class={cn(
+        'h-12 sm:h-14 md:h-16 w-full text-sm sm:text-base',
+        'backdrop-blur-md bg-white/80',
+        'border border-gray-300/50',
+        'shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
+        'focus-visible:border-gray-400/60',
+        'focus-visible:outline-none',
+        'focus-visible:ring-1',
+        'focus-visible:ring-gray-400/30',
+        'focus-visible:bg-white/90',
+        'hover:bg-white/90',
+        'hover:border-gray-400/60',
+        'text-gray-900',
+        'placeholder:text-gray-400',
+        'placeholder:font-mono',
+        'placeholder:text-xs sm:placeholder:text-sm',
+        'placeholder:tracking-wide',
+        'pl-11 sm:pl-14 pr-4 sm:pr-6',
+        'rounded-xl',
+        'transition-all duration-200',
+        'font-medium',
+        className,
+    )}
+    {...rest}
+/>