src/shared/ui/SearchBar/SearchBar.svelte

@@ -1,6 +1,6 @@
 <!-- Component: SearchBar -->
 <script lang="ts">
-import { Input } from '$shared/shadcn/ui/input';
+import { Input } from '$shared/ui';
 import AsteriskIcon from '@lucide/svelte/icons/asterisk';
 
 interface Props {
@@ -32,44 +32,11 @@ let {
     class: className,
     placeholder,
 }: Props = $props();
-
-function handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
-        event.preventDefault();
-    }
-}
 </script>
 
 <div class="relative w-full">
     <div class="absolute left-4 sm:left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
         <AsteriskIcon class="size-3 sm:size-4 stroke-gray-400 stroke-[1.5]" />
     </div>
-    <Input
-        id={id}
-        placeholder={placeholder}
-        bind:value={value}
-        onkeydown={handleKeyDown}
-        class="
-            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
-        "
-    />
+    <Input {id} class={className} bind:value={value} placeholder={placeholder} />
 </div>