From ea49edd9a7860a22d6b22c8c55b2822ce2e6a032 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 09:54:05 +0530
Subject: [PATCH 1/6] feat: Select

---
 .../src/lib/ui/Select/Select.stories.ts       | 16 +++++++++++++
 .../metagram/src/lib/ui/Select/Select.svelte  | 24 +++++++++++++++++++
 platforms/metagram/src/lib/ui/index.ts        |  1 +
 3 files changed, 41 insertions(+)
 create mode 100644 platforms/metagram/src/lib/ui/Select/Select.stories.ts
 create mode 100644 platforms/metagram/src/lib/ui/Select/Select.svelte

diff --git a/platforms/metagram/src/lib/ui/Select/Select.stories.ts b/platforms/metagram/src/lib/ui/Select/Select.stories.ts
new file mode 100644
index 000000000..ddd68e6e8
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Select/Select.stories.ts
@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import { Select } from '..';
+
+export default {
+	title: 'UI/Select',
+	component: Select,
+	tags: ['autodocs'],
+	render: (args: { Component: Select; props: ComponentProps<typeof Select> }) => ({
+		Component: Select,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: {}
+};
diff --git a/platforms/metagram/src/lib/ui/Select/Select.svelte b/platforms/metagram/src/lib/ui/Select/Select.svelte
new file mode 100644
index 000000000..5e0e21136
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Select/Select.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	let countries = [
+		{ code: '+41', flag: '🇬🇧', name: 'United Kingdom' },
+		{ code: '+49', flag: '🇩🇪', name: 'Germany' },
+		{ code: '+33', flag: '🇫🇷', name: 'France' }
+		// Add more as needed
+	];
+
+	let selectedCode = countries[0].code;
+</script>
+
+<div class="flex items-center space-x-2">
+	<div class="text-xl">{countries.find((c) => c.code === selectedCode)?.flag}</div>
+	<select
+		bind:value={selectedCode}
+		class="rounded-full bg-gray-100 px-3 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+	>
+		{#each countries as country}
+			<option value={country.code}>
+				{country.code} ({country.name})
+			</option>
+		{/each}
+	</select>
+</div>
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index 678e7c167..fb462d484 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,3 +1,4 @@
 export { default as Button } from './Button/Button.svelte';
 export { default as Avatar } from './Avatar/Avatar.svelte';
 export { default as Input } from './Input/Input.svelte';
+export { default as Select } from './Select/Select.svelte';

From c9d411d7e8762f4c247b89583e0d8a5d501edabc Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 11:30:51 +0530
Subject: [PATCH 2/6] fix: as per our design

---
 platforms/metagram/src/lib/ui/Select/Select.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Select/Select.svelte b/platforms/metagram/src/lib/ui/Select/Select.svelte
index 5e0e21136..c1fb7c1c7 100644
--- a/platforms/metagram/src/lib/ui/Select/Select.svelte
+++ b/platforms/metagram/src/lib/ui/Select/Select.svelte
@@ -9,15 +9,15 @@
 	let selectedCode = countries[0].code;
 </script>
 
-<div class="flex items-center space-x-2">
-	<div class="text-xl">{countries.find((c) => c.code === selectedCode)?.flag}</div>
+<div class="bg-grey flex w-[max-content] items-center space-x-2 rounded-full p-1.5">
+	<div class="rounded-full text-xl">{countries.find((c) => c.code === selectedCode)?.flag}</div>
 	<select
 		bind:value={selectedCode}
-		class="rounded-full bg-gray-100 px-3 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+		class="text-md focus:ring-2 focus:ring-transparent focus:outline-none"
 	>
 		{#each countries as country}
-			<option value={country.code}>
-				{country.code} ({country.name})
+			<option value={country.code} class="text-md text-black-600">
+				{country.code}
 			</option>
 		{/each}
 	</select>

From d098406d487ce38dd0b78e34d1fc8b4a64bcf9f5 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 11:47:46 +0530
Subject: [PATCH 3/6] fix: code format and as per svelte 5

---
 .../metagram/src/lib/ui/Select/Select.svelte  | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Select/Select.svelte b/platforms/metagram/src/lib/ui/Select/Select.svelte
index c1fb7c1c7..4e432fa55 100644
--- a/platforms/metagram/src/lib/ui/Select/Select.svelte
+++ b/platforms/metagram/src/lib/ui/Select/Select.svelte
@@ -1,21 +1,36 @@
 <script lang="ts">
-	let countries = [
-		{ code: '+41', flag: '🇬🇧', name: 'United Kingdom' },
-		{ code: '+49', flag: '🇩🇪', name: 'Germany' },
-		{ code: '+33', flag: '🇫🇷', name: 'France' }
-		// Add more as needed
-	];
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-	let selectedCode = countries[0].code;
+	interface ISelectProps extends HTMLAttributes<HTMLElement> {
+		options: Array<{
+			code: string;
+			flag: string;
+			name: string;
+		}>;
+	}
+
+	let {
+		options = [
+			{ code: '+41', flag: '🇬🇧', name: 'United Kingdom' },
+			{ code: '+49', flag: '🇩🇪', name: 'Germany' },
+			{ code: '+33', flag: '🇫🇷', name: 'France' }
+		],
+		...restProps
+	}: ISelectProps = $props();
+
+	let selectedCode = $state(options[0].code);
+
+	const cBase = 'bg-grey flex w-[max-content] items-center space-x-2 rounded-full p-1.5';
 </script>
 
-<div class="bg-grey flex w-[max-content] items-center space-x-2 rounded-full p-1.5">
-	<div class="rounded-full text-xl">{countries.find((c) => c.code === selectedCode)?.flag}</div>
+<div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
+	<div class="rounded-full text-xl">{options.find((c) => c.code === selectedCode)?.flag}</div>
 	<select
 		bind:value={selectedCode}
 		class="text-md focus:ring-2 focus:ring-transparent focus:outline-none"
 	>
-		{#each countries as country}
+		{#each options as country}
 			<option value={country.code} class="text-md text-black-600">
 				{country.code}
 			</option>

From 8a7b41e0af03dcf71f98c251264eb24e47d7ec79 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 11:53:02 +0530
Subject: [PATCH 4/6] fix: font-size

---
 platforms/metagram/src/lib/ui/Select/Select.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Select/Select.svelte b/platforms/metagram/src/lib/ui/Select/Select.svelte
index 4e432fa55..e312a5033 100644
--- a/platforms/metagram/src/lib/ui/Select/Select.svelte
+++ b/platforms/metagram/src/lib/ui/Select/Select.svelte
@@ -25,10 +25,10 @@
 </script>
 
 <div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
-	<div class="rounded-full text-xl">{options.find((c) => c.code === selectedCode)?.flag}</div>
+	<div class="rounded-full text-2xl">{options.find((c) => c.code === selectedCode)?.flag}</div>
 	<select
 		bind:value={selectedCode}
-		class="text-md focus:ring-2 focus:ring-transparent focus:outline-none"
+		class="text-base focus:ring-2 focus:ring-transparent focus:outline-none"
 	>
 		{#each options as country}
 			<option value={country.code} class="text-md text-black-600">

From c7e62b36c50c12ecc841a60bda3f4f06802cb632 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 12:00:11 +0530
Subject: [PATCH 5/6] fix: font-size

---
 platforms/metagram/src/lib/ui/Select/Select.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platforms/metagram/src/lib/ui/Select/Select.svelte b/platforms/metagram/src/lib/ui/Select/Select.svelte
index e312a5033..0dd308ddc 100644
--- a/platforms/metagram/src/lib/ui/Select/Select.svelte
+++ b/platforms/metagram/src/lib/ui/Select/Select.svelte
@@ -31,7 +31,7 @@
 		class="text-base focus:ring-2 focus:ring-transparent focus:outline-none"
 	>
 		{#each options as country}
-			<option value={country.code} class="text-md text-black-600">
+			<option value={country.code} class="text-base text-black-600">
 				{country.code}
 			</option>
 		{/each}

From 4a1d1f3120d7911473b1fafe2d9cf44b509e0735 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 14:08:06 +0530
Subject: [PATCH 6/6] fix: icon

---
 platforms/metagram/src/lib/ui/Select/Select.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/Select/Select.svelte b/platforms/metagram/src/lib/ui/Select/Select.svelte
index 0dd308ddc..007a4e0af 100644
--- a/platforms/metagram/src/lib/ui/Select/Select.svelte
+++ b/platforms/metagram/src/lib/ui/Select/Select.svelte
@@ -5,16 +5,16 @@
 	interface ISelectProps extends HTMLAttributes<HTMLElement> {
 		options: Array<{
 			code: string;
-			flag: string;
+			icon: string;
 			name: string;
 		}>;
 	}
 
 	let {
 		options = [
-			{ code: '+41', flag: '🇬🇧', name: 'United Kingdom' },
-			{ code: '+49', flag: '🇩🇪', name: 'Germany' },
-			{ code: '+33', flag: '🇫🇷', name: 'France' }
+			{ code: '+41', icon: '🇬🇧', name: 'United Kingdom' },
+			{ code: '+49', icon: '🇩🇪', name: 'Germany' },
+			{ code: '+33', icon: '🇫🇷', name: 'France' }
 		],
 		...restProps
 	}: ISelectProps = $props();
@@ -25,13 +25,13 @@
 </script>
 
 <div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
-	<div class="rounded-full text-2xl">{options.find((c) => c.code === selectedCode)?.flag}</div>
+	<div class="rounded-full text-2xl">{options.find((c) => c.code === selectedCode)?.icon}</div>
 	<select
 		bind:value={selectedCode}
 		class="text-base focus:ring-2 focus:ring-transparent focus:outline-none"
 	>
 		{#each options as country}
-			<option value={country.code} class="text-base text-black-600">
+			<option value={country.code} class="text-black-600 text-base">
 				{country.code}
 			</option>
 		{/each}