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',