feat: change disabled multi-select options to have strikethrough (#419)

Author: 43081j

.changeset/dirty-areas-sin.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": patch
+---
+
+Change styling of disabled multi-select options to have strikethrough.

packages/prompts/src/multi-select.ts

@@ -42,7 +42,7 @@ export const multiselect = <Value>(opts: MultiSelectOptions<Value>) => {
 	) => {
 		const label = option.label ?? String(option.value);
 		if (state === 'disabled') {
-			return `${color.gray(S_CHECKBOX_INACTIVE)} ${computeLabel(label, color.gray)}${
+			return `${color.gray(S_CHECKBOX_INACTIVE)} ${computeLabel(label, (str) => color.strikethrough(color.gray(str)))}${
 				option.hint ? ` ${color.dim(`(${option.hint ?? 'disabled'})`)}` : ''
 			}`;
 		}

packages/prompts/test/__snapshots__/multi-select.test.ts.snap

@@ -245,9 +245,9 @@ exports[`multiselect (isCI = false) > renders disabled options 1`] = `
   "<cursor.hide>",
   "│
 ◆  foo
-[36m│[39m  [90m◻[39m [90mopt0[39m
+[36m│[39m  [90m◻[39m [9m[90mopt0[39m[29m
 │  ◻ opt1
-[36m│[39m  [90m◻[39m [90mopt2[39m [2m(Hint 2)[22m
+[36m│[39m  [90m◻[39m [9m[90mopt2[39m[29m [2m(Hint 2)[22m
 └
 ",
   "<cursor.backward count=999><cursor.up count=6>",
@@ -979,9 +979,9 @@ exports[`multiselect (isCI = true) > renders disabled options 1`] = `
   "<cursor.hide>",
   "│
 ◆  foo
-[36m│[39m  [90m◻[39m [90mopt0[39m
+[36m│[39m  [90m◻[39m [9m[90mopt0[39m[29m
 │  ◻ opt1
-[36m│[39m  [90m◻[39m [90mopt2[39m [2m(Hint 2)[22m
+[36m│[39m  [90m◻[39m [9m[90mopt2[39m[29m [2m(Hint 2)[22m
 └
 ",
   "<cursor.backward count=999><cursor.up count=6>",