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,13 +81,15 @@
 			<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'
-							]
+					option.disabled
+						? ['cursor-not-allowed opacity-50']
+						: 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)}
 			>

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>