add ActionSelect component

package.json

@@ -49,7 +49,7 @@
 		"globals": "^16.0.0",
 		"libphonenumber-js": "^1.12.6",
 		"match-sorter": "^8.0.0",
-		"melt": "^0.12.0",
+		"melt": "^0.37.0",
 		"moment": "^2.30.1",
 		"phosphor-svelte": "^3.0.1",
 		"prettier": "^3.4.2",

pnpm-lock.yaml

@@ -30,9 +30,6 @@ importers:
       '@sveltejs/adapter-auto':
         specifier: ^4.0.0
         version: 4.0.0(@sveltejs/kit@2.22.2(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1)))
-      '@sveltejs/package':
-        specifier: ^2.0.0
-        version: 2.3.12(svelte@5.34.9)(typescript@5.8.3)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.0
         version: 5.1.0(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1))
@@ -70,8 +67,8 @@ importers:
         specifier: ^8.0.0
         version: 8.0.3
       melt:
-        specifier: ^0.12.0
+        specifier: ^0.37.0
-        version: 0.12.0(@floating-ui/dom@1.7.2)(svelte@5.34.9)
+        version: 0.37.0(@floating-ui/dom@1.7.2)(svelte@5.34.9)
       moment:
         specifier: ^2.30.1
         version: 2.30.1
@@ -87,9 +84,6 @@ importers:
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
         version: 0.6.13(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.34.9))(prettier@3.6.2)
-      publint:
-        specifier: ^0.3.2
-        version: 0.3.12
       svelte:
         specifier: ^5.0.0
         version: 5.34.9
@@ -393,10 +387,6 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@publint/pack@0.1.2':
-    resolution: {integrity: sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==}
-    engines: {node: '>=18'}
-
   '@rollup/rollup-android-arm-eabi@4.44.1':
     resolution: {integrity: sha512-JAcBr1+fgqx20m7Fwe1DxPUl/hPkee6jA6Pl7n1v2EFiktAHenTaXl5aIFjUIEsfn9w3HE4gK1lEgNGMzBDs1w==}
     cpu: [arm]
@@ -519,13 +509,6 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3 || ^6.0.0 || ^7.0.0-beta.0
 
-  '@sveltejs/package@2.3.12':
-    resolution: {integrity: sha512-PUl5aNbk2x28rPdAVTZMtrZmAx6yxQ+s33OtOkE0j0fWtoi9GzENXKRJPHrGk5rwGrczqY0LtNi8dycRPL+yzA==}
-    engines: {node: ^16.14 || >=18}
-    hasBin: true
-    peerDependencies:
-      svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
-
   '@sveltejs/vite-plugin-svelte-inspector@4.0.1':
     resolution: {integrity: sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22}
@@ -816,9 +799,6 @@ packages:
       supports-color:
         optional: true
 
-  dedent-js@1.0.1:
-    resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
-
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -826,6 +806,10 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   detect-libc@2.0.4:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
@@ -960,6 +944,9 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  focus-trap@7.6.5:
+    resolution: {integrity: sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1156,20 +1143,17 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  lower-case@2.0.2:
-    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
-
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
   match-sorter@8.0.3:
     resolution: {integrity: sha512-BnR/YBS1iO94R3EcseKkb7kJ2w2su5CWmywHvFYv70HQ2syqca79JefoGocMK+G1NOdpV2kt0G3uQb5hcdFtIA==}
 
-  melt@0.12.0:
+  melt@0.37.0:
-    resolution: {integrity: sha512-QyaslYNG5hZD0t8Xp9WYc1tpL7yfiU2V2N4QGF/hZpMEtV7+SgBXEFWxeYFRLlBQp+aOzlXUmk8ZpD/7rxo9VA==}
+    resolution: {integrity: sha512-D9s3KjrqWo9Ei7u1Q8zhRX0+tMFjSPw8N5pv/k1PW1Scxz84b2gPEPuJU3+jrqtoI4I8256fM5hUaeoPAcQeaw==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
-      svelte: ^5.0.0
+      svelte: ^5.30.1
 
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@@ -1222,17 +1206,9 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@5.1.5:
-    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  no-case@3.0.4:
-    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
-
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -1245,16 +1221,10 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  package-manager-detector@1.3.0:
-    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
-  pascal-case@3.1.2:
-    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
-
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1389,11 +1359,6 @@ packages:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  publint@0.3.12:
-    resolution: {integrity: sha512-1w3MMtL9iotBjm1mmXtG3Nk06wnq9UhGNRpQ2j6n1Zq7YAD6gnxMMZMIxlRPAydVjVbjSm+n0lhwqsD1m4LD5w==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -1485,16 +1450,13 @@ packages:
       svelte:
         optional: true
 
-  svelte2tsx@0.7.40:
-    resolution: {integrity: sha512-Fgqe2lzC9DWT/kQTIXqN39O2ot9rUqzUu9dqpbuI6EsaEJ6+RSXVmXnxcNYMlKb2LRPDoIg9TVzXYWwi0zhCmQ==}
-    peerDependencies:
-      svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
-      typescript: ^4.9.4 || ^5.0.0
-
   svelte@5.34.9:
     resolution: {integrity: sha512-sld35zFpooaSRSj4qw8Vl/cyyK0/sLQq9qhJ7BGZo/Kd0ggYtEnvNYLlzhhoqYsYQzA0hJqkzt3RBO/8KoTZOg==}
     engines: {node: '>=18'}
 
+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
   tailwindcss-animate@1.0.7:
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
@@ -1529,9 +1491,6 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
-  tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
-
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -1829,8 +1788,6 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@publint/pack@0.1.2': {}
-
   '@rollup/rollup-android-arm-eabi@4.44.1':
     optional: true
 
@@ -1921,17 +1878,6 @@ snapshots:
       vite: 6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1)
       vitefu: 1.0.7(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1))
 
-  '@sveltejs/package@2.3.12(svelte@5.34.9)(typescript@5.8.3)':
-    dependencies:
-      chokidar: 4.0.3
-      kleur: 4.1.5
-      sade: 1.8.1
-      semver: 7.7.2
-      svelte: 5.34.9
-      svelte2tsx: 0.7.40(svelte@5.34.9)(typescript@5.8.3)
-    transitivePeerDependencies:
-      - typescript
-
   '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 5.1.0(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1))
@@ -2217,12 +2163,12 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  dedent-js@1.0.1: {}
-
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
 
+  dequal@2.0.3: {}
+
   detect-libc@2.0.4: {}
 
   devalue@5.1.1: {}
@@ -2407,6 +2353,10 @@ snapshots:
 
   flatted@3.3.3: {}
 
+  focus-trap@7.6.5:
+    dependencies:
+      tabbable: 6.2.0
+
   fsevents@2.3.3:
     optional: true
 
@@ -2560,10 +2510,6 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
-  lower-case@2.0.2:
-    dependencies:
-      tslib: 2.8.1
-
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.4
@@ -2573,11 +2519,12 @@ snapshots:
       '@babel/runtime': 7.27.6
       remove-accents: 0.5.0
 
-  melt@0.12.0(@floating-ui/dom@1.7.2)(svelte@5.34.9):
+  melt@0.37.0(@floating-ui/dom@1.7.2)(svelte@5.34.9):
     dependencies:
       '@floating-ui/dom': 1.7.2
+      dequal: 2.0.3
+      focus-trap: 7.6.5
       jest-axe: 9.0.0
-      nanoid: 5.1.5
       runed: 0.23.4(svelte@5.34.9)
       svelte: 5.34.9
 
@@ -2616,15 +2563,8 @@ snapshots:
 
   nanoid@3.3.11: {}
 
-  nanoid@5.1.5: {}
-
   natural-compare@1.4.0: {}
 
-  no-case@3.0.4:
-    dependencies:
-      lower-case: 2.0.2
-      tslib: 2.8.1
-
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -2642,17 +2582,10 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  package-manager-detector@1.3.0: {}
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
 
-  pascal-case@3.1.2:
-    dependencies:
-      no-case: 3.0.4
-      tslib: 2.8.1
-
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -2718,13 +2651,6 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 18.3.1
 
-  publint@0.3.12:
-    dependencies:
-      '@publint/pack': 0.1.2
-      package-manager-detector: 1.3.0
-      picocolors: 1.1.1
-      sade: 1.8.1
-
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -2825,13 +2751,6 @@ snapshots:
     optionalDependencies:
       svelte: 5.34.9
 
-  svelte2tsx@0.7.40(svelte@5.34.9)(typescript@5.8.3):
-    dependencies:
-      dedent-js: 1.0.1
-      pascal-case: 3.1.2
-      svelte: 5.34.9
-      typescript: 5.8.3
-
   svelte@5.34.9:
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -2849,6 +2768,8 @@ snapshots:
       magic-string: 0.30.17
       zimmerframe: 1.1.2
 
+  tabbable@6.2.0: {}
+
   tailwindcss-animate@1.0.7(tailwindcss@4.1.11):
     dependencies:
       tailwindcss: 4.1.11
@@ -2881,8 +2802,6 @@ snapshots:
     dependencies:
       typescript: 5.8.3
 
-  tslib@2.8.1: {}
-
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1

src/lib/ActionSelect.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" module>
+	export type ButtonSelectOption = {
+		icon?:
+			| { component: Component; props: Record<string, any> }
+			| Snippet<[opt: ButtonSelectOption]>;
+		title: string | Snippet<[opt: ButtonSelectOption]>;
+		onchoose?: (opt: ButtonSelectOption) => void;
+	};
+</script>
+
+<script lang="ts">
+	import { Select } from 'melt/builders';
+	import type { Component, Snippet } from 'svelte';
+	import Label from './Label.svelte';
+	import Button from './Button.svelte';
+	import { CaretDown, Check } from 'phosphor-svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		label?: string;
+		placeholder?: string;
+		stateless?: boolean;
+		options: ButtonSelectOption[];
+		class?: ClassValue | null | undefined;
+	}
+
+	let {
+		label,
+		placeholder = 'Choose an action',
+		stateless = true,
+		options,
+		class: classValue
+	}: Props = $props();
+
+	const select = new Select<ButtonSelectOption>({
+		onValueChange: (value) => {
+			value?.onchoose?.(value);
+		}
+	});
+</script>
+
+<div>
+	{#if label}
+		<Label {...select.label}>{label}</Label>
+	{/if}
+
+	<Button class={['flex w-full items-center rounded-xl!', classValue]} {...select.trigger}>
+		{#if stateless || !select.value}
+			{placeholder}
+		{:else}
+			{@render icon(select.value)}
+			{@render title(select.value)}
+		{/if}
+
+		<CaretDown
+			weight="bold"
+			size="1.1em"
+			class={[select.open && '-scale-y-100', 'ml-auto transition-transform']}
+		/>
+	</Button>
+
+	<div class={['border-sui-accent space-y-1 rounded-xl border p-2 shadow-md']} {...select.content}>
+		{#each options as option}
+			<button
+				class={[
+					'flex w-full items-center gap-3 rounded px-5 py-2 text-base font-medium transition-colors',
+					stateless
+						? [select.highlighted?.title === option.title && 'bg-sui-text-100', 'cursor-pointer']
+						: [
+								select.highlighted?.title === option.title &&
+									'bg-sui-accent/80 text-sui-background',
+								select.value?.title === option.title && 'bg-sui-accent text-sui-background'
+							]
+				]}
+				{...select.getOption(option, typeof option.title === 'string' ? option.title : undefined)}
+			>
+				{@render icon(option)}
+				{@render title(option)}
+
+				{#if !stateless}
+					<Check
+						size="1.1em"
+						weight="bold"
+						class={[
+							select.value?.title === option.title ? 'opacity-100' : 'opacity-0',
+							'ml-auto transition-opacity'
+						]}
+					/>
+				{/if}
+			</button>
+		{/each}
+	</div>
+</div>
+
+{#snippet title(opt: ButtonSelectOption)}
+	{#if typeof opt.title === 'string'}
+		{opt.title}
+	{:else}
+		{@render opt.title(opt)}
+	{/if}
+{/snippet}
+
+{#snippet icon(opt: ButtonSelectOption)}
+	{#if opt.icon && typeof opt.icon === 'object'}
+		<opt.icon.component {...opt.icon.props} />
+	{:else if opt.icon}
+		{@render opt.icon(opt)}
+	{/if}
+{/snippet}

src/lib/Button.svelte

@@ -144,5 +144,6 @@
 		background-color: rgba(255, 255, 255, 0.3);
 		animation: ripple 0.5s linear;
 		transform: scale(0);
+		pointer-events: none;
 	}
 </style>

src/lib/index.ts

@@ -1,4 +1,5 @@
 // Reexport your entry components here
+export { default as ActionSelect } from './ActionSelect.svelte';
 export { default as Button } from './Button.svelte';
 export { default as CenterBox } from './CenterBox.svelte';
 export { default as Checkbox, type CheckboxState } from './Checkbox.svelte';

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Button from '$lib/Button.svelte';
+	import ActionSelect from '$lib/ActionSelect.svelte';
 	import Checkbox, { type CheckboxState } from '$lib/Checkbox.svelte';
 	import Combobox from '$lib/Combobox.svelte';
 	import DateInput from '$lib/DateInput.svelte';
@@ -49,6 +50,15 @@
 	</div>
 </div>
 
+<div class="component">
+	<p class="title">Button Select</p>
+
+	<ActionSelect
+		label="Action"
+		options={[{ title: 'Yeet' }, { title: 'Yote' }, { title: 'Yote and Yeet' }]}
+	/>
+</div>
+
 <div class="component">
 	<p class="title">Combobox</p>