feat: Select

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: {}
+};

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>

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