select example

componentization/package.json

@@ -12,6 +12,8 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@melt-ui/pp": "^0.3.0",
+		"@melt-ui/svelte": "^0.74.3",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",

componentization/src/lib/Select.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { createSelect, createSync, melt, type SelectOption } from '@melt-ui/svelte';
+	import { fade } from 'svelte/transition';
+
+	export let options: Record<string, SelectOption<string>[]>;
+	export let value: string | undefined = undefined;
+
+	const {
+		elements: { trigger, menu, option, group, groupLabel, label },
+		states: { selectedLabel, open, selected },
+		helpers: { isSelected }
+	} = createSelect<string>({
+		forceVisible: true,
+		positioning: {
+			placement: 'bottom',
+			fitViewport: true,
+			sameWidth: true
+		}
+	});
+
+	$: flatOptions = Object.values(options).flat();
+
+	const sync = createSync({ selected });
+	$: sync.selected(
+		flatOptions.find((o) => o.value === value) || undefined, // Selected will be set to this
+		(o) => o?.value // value will be set to this
+	);
+</script>
+
+<div class="flex flex-col gap-1">
+	<!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute -->
+	<label class="block text-white text-lg font-500" use:melt={$label}>Favorite Flavor</label>
+	<button
+		class="flex h-10 min-w-[220px] items-center justify-between rounded-lg bg-white px-3 py-2
+  text-magnum-700 shadow transition-opacity hover:opacity-90"
+		use:melt={$trigger}
+		aria-label="Food"
+	>
+		{$selectedLabel || 'Select a flavor'}
+	</button>
+	{#if $open}
+		<div
+			class=" z-10 flex max-h-[300px] flex-col
+    overflow-y-auto rounded-lg bg-white p-1
+    shadow focus:!ring-0"
+			use:melt={$menu}
+			transition:fade={{ duration: 150 }}
+		>
+			{#each Object.entries(options) as [key, arr]}
+				<div use:melt={$group(key)}>
+					<div
+						class="py-1 pl-4 pr-4 font-semibold capitalize text-neutral-800"
+						use:melt={$groupLabel(key)}
+					>
+						{key}
+					</div>
+					{#each arr as item}
+						<div
+							class="relative cursor-pointer rounded-lg py-1 pl-8 pr-4 text-neutral-800
+              hover:bg-magnum-100 focus:z-10
+              focus:text-magnum-700
+              data-[highlighted]:bg-magnum-200 data-[highlighted]:text-magnum-900
+              data-[disabled]:opacity-50"
+							use:melt={$option(item)}
+						>
+							{#if $isSelected(item.value)}
+								<span class="absolute left-4">✓</span>
+							{/if}
+
+							{item.label}
+						</div>
+					{/each}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

componentization/src/routes/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import '@unocss/reset/eric-meyer.css';
+	import '@unocss/reset/tailwind-compat.css';
 	import '../app.css';
 	import 'virtual:uno.css';
 </script>
 
-<main class="min-h-screen bg-slate-900 text-white p-4">
+<main class="min-h-screen bg-neutral-950 text-white p-4">
 	<slot />
 </main>

componentization/src/routes/+page.svelte

@@ -1,3 +1,22 @@
+<script lang="ts">
+	import Select from '$lib/Select.svelte';
+
+	const selectOptions = {
+		sweet: [
+			{ value: 'Caramel', label: 'Caramel' },
+			{ value: 'Chocolate', label: 'Chocolate' },
+			{ value: 'Strawberry', label: 'Strawberry' },
+			{ value: 'Cookies & Cream', label: 'Cookies & Cream' }
+		],
+		savory: [
+			{ value: 'Basil', label: 'Basil' },
+			{ value: 'Bacon', label: 'Bacon' },
+			{ value: 'Rosemary', label: 'Rosemary' }
+		]
+	};
+	let selectValue = 'Chocolate';
+</script>
+
 <hgroup>
 	<h1 class="text-4xl font-semibold">Melty components</h1>
 	<h2 class="font-bold text-lg text-slate-300">
@@ -9,3 +28,19 @@
 		>.
 	</h3>
 </hgroup>
+
+<div class="flex flex-wrap mbs-16 gap-16">
+	<div
+		class="grid place-items-center rounded-xl w-40rem h-30rem bg-gradient-to-br from-magnum-400 to-magnum-700"
+	>
+		<div class="flex flex-col gap-4 items-center">
+			<Select options={selectOptions} bind:value={selectValue} />
+			<button
+				class="bg-white text-neutral-900 p-2 py-1 rounded-lg hover:opacity-75 active:opacity-50"
+				on:click={() => (selectValue = 'Basil')}
+			>
+				Set to basil
+			</button>
+		</div>
+	</div>
+</div>

componentization/svelte.config.js

@@ -1,18 +1,16 @@
+import { preprocessMeltUI, sequence } from '@melt-ui/pp';
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-/** @type {import('@sveltejs/kit').Config} */
+/** @type {import('@sveltejs/kit').Config}*/
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-
+	preprocess: sequence([vitePreprocess(), preprocessMeltUI()]),
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter()
 	}
 };
-
 export default config;

componentization/uno.config.ts

@@ -2,5 +2,21 @@
 import { defineConfig } from 'unocss'
 
 export default defineConfig({
-  // ...UnoCSS options
+  theme: {
+    colors: {
+      magnum: {
+        '50': '#fff9ed',
+        '100': '#fef2d6',
+        '200': '#fce0ac',
+        '300': '#f9c978',
+        '400': '#f7b155',
+        '500': '#f38d1c',
+        '600': '#e47312',
+        '700': '#bd5711',
+        '800': '#964516',
+        '900': '#793a15',
+        '950': '#411c09'
+      }
+    }
+  }
 })