action select: add disabled option state

src/lib/ActionSelect.svelte

@@ -4,6 +4,7 @@
 			| { component: Component; props: Record<string, any> }
 			| Snippet<[opt: ActionSelectOption]>;
 		title: string | Snippet<[opt: ActionSelectOption]>;
+		disabled?: boolean;
 		onchoose?: (opt: ActionSelectOption) => void;
 	};
 </script>
@@ -41,6 +42,7 @@
 	const select = new Select<ActionSelectOption>({
 		value: () => value,
 		onValueChange: (val) => {
+			if (val?.disabled) return;
 			val?.onchoose?.(val);
 			if (!stateless) {
 				value = val;
@@ -79,7 +81,9 @@
 			<button
 				class={[
 					'flex w-full items-center gap-3 rounded px-5 py-2 text-base font-medium transition-colors',
-					stateless
+					option.disabled
+						? ['cursor-not-allowed opacity-50']
+						: stateless
 							? [select.highlighted?.title === option.title && 'bg-sui-text-100', 'cursor-pointer']
 							: [
 									select.highlighted?.title === option.title &&

src/routes/+page.svelte

@@ -58,7 +58,12 @@
 			class="basis-1/2"
 			stateless
 			label="Stateless Action"
-			options={[{ title: 'Yeet' }, { title: 'Yote' }, { title: 'Yote and Yeet' }]}
+			options={[
+				{ title: 'Yeet' },
+				{ title: 'Yote' },
+				{ title: 'Yote and Yeet' },
+				{ title: 'Disabled Action', disabled: true }
+			]}
 		/>
 		<ActionSelect
 			class="basis-1/2"
@@ -66,7 +71,12 @@
 			value={{ title: 'Initial Action', onchoose: (value) => console.log('Chosen:', value) }}
 			options={[
 				{ title: 'Action 1', onchoose: (value) => console.log('Action 1 chosen:', value) },
-				{ title: 'Action 2', onchoose: (value) => console.log('Action 2 chosen:', value) }
+				{ title: 'Action 2', onchoose: (value) => console.log('Action 2 chosen:', value) },
+				{
+					title: 'Disabled Action',
+					disabled: true,
+					onchoose: (value) => console.log('Disabled action chosen:', value)
+				}
 			]}
 		/>
 	</div>