fix: classes merge and a files as a prop

Author: grv-saini-20

platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts

@@ -12,5 +12,7 @@ export default {
 };
 
 export const Primary = {
-	args: {}
+	args: {
+		placeholder: 'Write your message'
+	}
 };

platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Avatar, Input } from '$lib/ui';
+	import { cn } from '$lib/utils';
 	import { ImageAdd02Icon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -8,24 +9,23 @@
 		src: string;
 		value: string;
 		placeholder?: string;
+		files?: FileList | undefined;
 	}
 
 	let {
 		src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
 		value,
-		placeholder
+		placeholder,
+		files = $bindable(),
+		...restProps
 	}: IMessageInputProps = $props();
 
-	let files: FileList | undefined = $state();
-
-	$effect(() => {
-		console.log(files);
-	});
+	const cBase = 'flex items-center justify-between gap-2';
 </script>
 
-<div class="flex items-center justify-between gap-2">
+<div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
 	<Avatar size="sm" {src} />
-	<Input type="text" bind:value placeholder="Type your message" />
+	<Input type="text" bind:value {placeholder} />
 	<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
 		<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
 		<label for="add-image">