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,39 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface ISelectProps extends HTMLAttributes<HTMLElement> {
+		options: Array<{
+			code: string;
+			icon: string;
+			name: string;
+		}>;
+	}
+
+	let {
+		options = [
+			{ code: '+41', icon: '🇬🇧', name: 'United Kingdom' },
+			{ code: '+49', icon: '🇩🇪', name: 'Germany' },
+			{ code: '+33', icon: '🇫🇷', 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 {...restProps} class={cn([cBase, restProps.class].join(' '))}>
+	<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-black-600 text-base">
+				{country.code}
+			</option>
+		{/each}
+	</select>
+</div>

platforms/metagram/src/lib/ui/index.ts

@@ -1,5 +1,6 @@
 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';
 export { default as Label } from './Label/Label.svelte';
 export { default as Toggle } from './Toggle/Toggle.svelte';