From df2d6bae3b1ade66e037f0f785c4c7948f74dfd4 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 9 Feb 2026 09:31:25 +0300
Subject: [PATCH] feat(Input): create ghost variant styling

---
 src/shared/ui/Input/Input.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/shared/ui/Input/Input.svelte b/src/shared/ui/Input/Input.svelte
index 986d758..da1e393 100644
--- a/src/shared/ui/Input/Input.svelte
+++ b/src/shared/ui/Input/Input.svelte
@@ -16,22 +16,29 @@ type Props = ComponentProps<typeof Input> & {
      * Additional CSS classes for the container
      */
     class?: string;
+
+    variant?: 'default' | 'ghost';
 };
 
 let {
     value = $bindable(''),
     class: className,
+    variant = 'default',
     ...rest
 }: Props = $props();
+
+const isGhost = $derived(variant === 'ghost');
 </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',
+        'backdrop-blur-md',
+        isGhost ? 'bg-transparent' : 'bg-white/80',
         'border border-gray-300/50',
-        'shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
+        isGhost ? 'border-transparent' : 'border-gray-300/50',
+        isGhost ? 'shadow-none' : 'shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
         'focus-visible:border-gray-400/60',
         'focus-visible:outline-none',
         'focus-visible:ring-1',