Switch to yoctocolors (#1446)

packages/checkbox/package.json

@@ -61,7 +61,7 @@
     "@inquirer/figures": "^1.0.3",
     "@inquirer/type": "^1.3.3",
     "ansi-escapes": "^4.3.2",
-    "picocolors": "^1.0.1"
+    "yoctocolors-cjs": "^2.1.1"
   },
   "devDependencies": {
     "@inquirer/testing": "^2.1.23"

packages/checkbox/src/index.mts

@@ -17,7 +17,7 @@ import {
   type Theme,
 } from '@inquirer/core';
 import type { PartialDeep } from '@inquirer/type';
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import figures from '@inquirer/figures';
 import ansiEscapes from 'ansi-escapes';
 
@@ -39,12 +39,12 @@ type CheckboxTheme = {
 
 const checkboxTheme: CheckboxTheme = {
   icon: {
-    checked: pc.green(figures.circleFilled),
+    checked: colors.green(figures.circleFilled),
     unchecked: figures.circle,
     cursor: figures.pointer,
   },
   style: {
-    disabledChoice: (text: string) => pc.dim(`- ${text}`),
+    disabledChoice: (text: string) => colors.dim(`- ${text}`),
     renderSelectedChoices: (selectedChoices) =>
       selectedChoices.map((choice) => choice.name || choice.value).join(', '),
   },

packages/core/README.md

@@ -15,7 +15,7 @@ yarn add @inquirer/core
 # Usage
 
 ```ts
-import pc from 'picocolors';
+import colors from 'yoctocolors';
 import {
   createPrompt,
   useState,
@@ -44,12 +44,12 @@ const confirm = createPrompt<boolean, { message: string; default?: boolean }>(
     let formattedValue = value;
     let defaultValue = '';
     if (status === 'done') {
-      formattedValue = pc.cyan(value);
+      formattedValue = colors.cyan(value);
     } else {
-      defaultValue = pc.dim(config.default === false ? ' (y/N)' : ' (Y/n)');
+      defaultValue = colors.dim(config.default === false ? ' (y/N)' : ' (Y/n)');
     }
 
-    const message = pc.bold(config.message);
+    const message = colors.bold(config.message);
     return `${prefix} ${message}${defaultValue} ${formattedValue}`;
   },
 );

packages/core/package.json

@@ -66,10 +66,10 @@
     "cli-spinners": "^2.9.2",
     "cli-width": "^4.1.0",
     "mute-stream": "^1.0.0",
-    "picocolors": "^1.0.1",
     "signal-exit": "^4.1.0",
     "strip-ansi": "^6.0.1",
-    "wrap-ansi": "^6.2.0"
+    "wrap-ansi": "^6.2.0",
+    "yoctocolors-cjs": "^2.1.1"
   },
   "devDependencies": {
     "@inquirer/testing": "^2.1.23"

packages/core/src/lib/Separator.mts

@@ -1,4 +1,4 @@
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import figures from '@inquirer/figures';
 
 /**
@@ -7,7 +7,7 @@ import figures from '@inquirer/figures';
  */
 
 export class Separator {
-  readonly separator = pc.dim(Array.from({ length: 15 }).join(figures.line));
+  readonly separator = colors.dim(Array.from({ length: 15 }).join(figures.line));
   readonly type = 'separator';
 
   constructor(separator?: string) {

packages/core/src/lib/theme.mts

@@ -1,4 +1,4 @@
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import spinners from 'cli-spinners';
 import type { Prettify } from '@inquirer/type';
 
@@ -22,18 +22,18 @@ type DefaultTheme = {
 export type Theme<Extension extends object = object> = Prettify<Extension & DefaultTheme>;
 
 export const defaultTheme: DefaultTheme = {
-  prefix: pc.green('?'),
+  prefix: colors.green('?'),
   spinner: {
     interval: spinners.dots.interval,
-    frames: spinners.dots.frames.map((frame) => pc.yellow(frame)),
+    frames: spinners.dots.frames.map((frame) => colors.yellow(frame)),
   },
   style: {
-    answer: pc.cyan,
-    message: pc.bold,
-    error: (text) => pc.red(`> ${text}`),
-    defaultAnswer: (text) => pc.dim(`(${text})`),
-    help: pc.dim,
-    highlight: pc.cyan,
-    key: (text: string) => pc.cyan(pc.bold(`<${text}>`)),
+    answer: colors.cyan,
+    message: colors.bold,
+    error: (text) => colors.red(`> ${text}`),
+    defaultAnswer: (text) => colors.dim(`(${text})`),
+    help: colors.dim,
+    highlight: colors.cyan,
+    key: (text: string) => colors.cyan(colors.bold(`<${text}>`)),
   },
 };

packages/demo/demos/input.mjs

@@ -1,5 +1,5 @@
 import * as url from 'node:url';
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import { input } from '@inquirer/prompts';
 
 const hexRegEx = /(\d|[a-f])/gim;
@@ -19,7 +19,7 @@ const demo = async () => {
   answer = await input({
     message: 'Enter an hex color?',
     transformer(value = '', { isFinal }) {
-      return isFinal ? pc.underline(value) : value;
+      return isFinal ? colors.underline(value) : value;
     },
     validate: (value = '') => isHex(value) || 'Pass a valid hex value',
   });

packages/demo/package.json

@@ -63,7 +63,7 @@
   "dependencies": {
     "@inquirer/core": "^8.2.4",
     "@inquirer/prompts": "^5.0.7",
-    "picocolors": "^1.0.1"
+    "yoctocolors-cjs": "^2.1.1"
   },
   "publishConfig": {
     "access": "public"

packages/expand/package.json

@@ -56,7 +56,7 @@
   "dependencies": {
     "@inquirer/core": "^8.2.4",
     "@inquirer/type": "^1.3.3",
-    "picocolors": "^1.0.1"
+    "yoctocolors-cjs": "^2.1.1"
   },
   "devDependencies": {
     "@inquirer/testing": "^2.1.23"

packages/expand/src/index.mts

@@ -8,7 +8,7 @@ import {
   type Theme,
 } from '@inquirer/core';
 import type { PartialDeep } from '@inquirer/type';
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 
 type ExpandChoice =
   | { key: string; name: string }
@@ -67,7 +67,7 @@ export default createPrompt<string, ExpandConfig>((config, done) => {
         } else if (value === '') {
           setError('Please input a value');
         } else {
-          setError(`"${pc.red(value)}" isn't an available option`);
+          setError(`"${colors.red(value)}" isn't an available option`);
         }
       }
     } else {
@@ -116,7 +116,7 @@ export default createPrompt<string, ExpandConfig>((config, done) => {
   let helpTip = '';
   const currentOption = allChoices.find(({ key }) => key === value.toLowerCase());
   if (currentOption) {
-    helpTip = `${pc.cyan('>>')} ${getChoiceKey(currentOption, 'name')}`;
+    helpTip = `${colors.cyan('>>')} ${getChoiceKey(currentOption, 'name')}`;
   }
 
   let error = '';

packages/inquirer/lib/objects/separator.js

@@ -1,4 +1,4 @@
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import figures from '@inquirer/figures';
 
 /**
@@ -11,7 +11,7 @@ import figures from '@inquirer/figures';
 export default class Separator {
   constructor(line) {
     this.type = 'separator';
-    this.line = pc.dim(line || Array.from({ length: 15 }).join(figures.line));
+    this.line = colors.dim(line || Array.from({ length: 15 }).join(figures.line));
   }
 
   /**

packages/inquirer/lib/prompts/base.js

@@ -2,7 +2,7 @@
  * Base prompt implementation
  * Should be extended by prompt types.
  */
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import runAsync from 'run-async';
 import { filter, mergeMap, share, take, takeUntil } from 'rxjs';
 import Choices from '../objects/choices.js';
@@ -24,7 +24,7 @@ export default class Prompt {
       filteringText: '',
       when: () => true,
       suffix: '',
-      prefix: pc.green('?'),
+      prefix: colors.green('?'),
       transformer: (val) => val,
       ...question,
     };
@@ -149,9 +149,9 @@ export default class Prompt {
   getQuestion() {
     let message =
       (this.opt.prefix ? this.opt.prefix + ' ' : '') +
-      pc.bold(this.opt.message) +
+      colors.bold(this.opt.message) +
       this.opt.suffix +
-      pc.reset(' ');
+      colors.reset(' ');
 
     // Append the default if available, and if question isn't touched/answered
     if (
@@ -162,8 +162,8 @@ export default class Prompt {
       // If default password is supplied, hide it
       message +=
         this.opt.type === 'password'
-          ? pc.italic(pc.dim('[hidden] '))
-          : pc.dim('(' + this.opt.default + ') ');
+          ? colors.italic(colors.dim('[hidden] '))
+          : colors.dim('(' + this.opt.default + ') ');
     }
 
     return message;

packages/inquirer/lib/prompts/checkbox.js

@@ -3,7 +3,7 @@
  */
 
 import ansiEscapes from 'ansi-escapes';
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import figures from '@inquirer/figures';
 import { map, takeUntil } from 'rxjs';
 import observe from '../utils/events.js';
@@ -88,19 +88,19 @@ export default class CheckboxPrompt extends Base {
     if (!this.dontShowHints) {
       message +=
         '(Press ' +
-        pc.cyan(pc.bold('<space>')) +
+        colors.cyan(colors.bold('<space>')) +
         ' to select, ' +
-        pc.cyan(pc.bold('<a>')) +
+        colors.cyan(colors.bold('<a>')) +
         ' to toggle all, ' +
-        pc.cyan(pc.bold('<i>')) +
+        colors.cyan(colors.bold('<i>')) +
         ' to invert selection, and ' +
-        pc.cyan(pc.bold('<enter>')) +
+        colors.cyan(colors.bold('<enter>')) +
         ' to proceed)';
     }
 
     // Render choices or answer depending on the state
     if (this.status === 'answered') {
-      message += pc.cyan(this.selection.join(', '));
+      message += colors.cyan(this.selection.join(', '));
     } else {
       const choicesStr = renderChoices(this.opt.choices, this.pointer);
       const indexPosition = this.opt.choices.indexOf(
@@ -132,7 +132,7 @@ export default class CheckboxPrompt extends Base {
     }
 
     if (error) {
-      bottomContent = pc.red('>> ') + error;
+      bottomContent = colors.red('>> ') + error;
     }
 
     message += ansiEscapes.cursorHide;
@@ -249,7 +249,9 @@ function renderChoices(choices, pointer) {
     } else {
       const line = getCheckbox(choice.checked) + ' ' + choice.name;
       output +=
-        i - separatorOffset === pointer ? pc.cyan(figures.pointer + line) : ' ' + line;
+        i - separatorOffset === pointer
+          ? colors.cyan(figures.pointer + line)
+          : ' ' + line;
     }
 
     output += '\n';
@@ -265,5 +267,5 @@ function renderChoices(choices, pointer) {
  */
 
 function getCheckbox(checked) {
-  return checked ? pc.green(figures.radioOn) : figures.radioOff;
+  return checked ? colors.green(figures.radioOn) : figures.radioOff;
 }

packages/inquirer/lib/prompts/confirm.js

@@ -2,7 +2,7 @@
  * `confirm` type prompt
  */
 
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import { take, takeUntil } from 'rxjs';
 import observe from '../utils/events.js';
 import Base from './base.js';
@@ -60,7 +60,7 @@ export default class ConfirmPrompt extends Base {
     let message = this.getQuestion();
 
     if (typeof answer === 'boolean') {
-      message += pc.cyan(answer ? 'Yes' : 'No');
+      message += colors.cyan(answer ? 'Yes' : 'No');
     } else if (answer) {
       message += answer;
     } else {

packages/inquirer/lib/prompts/editor.js

@@ -2,7 +2,7 @@
  * `editor` type prompt
  */
 
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import { editAsync } from 'external-editor';
 import { Subject } from 'rxjs';
 import observe from '../utils/events.js';
@@ -56,11 +56,11 @@ export default class EditorPrompt extends Base {
 
     message +=
       this.status === 'answered'
-        ? pc.dim('Received')
-        : pc.dim('Press <enter> to launch your preferred editor.');
+        ? colors.dim('Received')
+        : colors.dim('Press <enter> to launch your preferred editor.');
 
     if (error) {
-      bottomContent = pc.red('>> ') + error;
+      bottomContent = colors.red('>> ') + error;
     }
 
     this.screen.render(message, bottomContent);

packages/inquirer/lib/prompts/expand.js

@@ -2,7 +2,7 @@
  * `rawlist` type prompt
  */
 
-import pc from 'picocolors';
+import colors from 'yoctocolors-cjs';
 import { map, takeUntil } from 'rxjs';
 import Separator from '../objects/separator.js';
 import observe from '../utils/events.js';
@@ -76,7 +76,7 @@ export default class ExpandPrompt extends Base {
     let bottomContent = '';
 
     if (this.status === 'answered') {
-      message += pc.cyan(this.answer);
+      message += colors.cyan(this.answer);
     } else if (this.status === 'expanded') {
       const choicesStr = renderChoices(this.opt.choices, this.selectedKey);
       message += this.paginator.paginate(choicesStr, this.selectedKey, this.opt.pageSize);
@@ -86,11 +86,11 @@ export default class ExpandPrompt extends Base {
     message += this.rl.line;
 
     if (error) {
-      bottomContent = pc.red('>> ') + error;
+      bottomContent = colors.red('>> ') + error;
     }
 
     if (hint) {
-      bottomContent = pc.cyan('>> ') + hint;
+      bottomContent = colors.cyan('>> ') + hint;
     }
 
     this.screen.render(message, bottomContent);
@@ -125,7 +125,7 @@ export default class ExpandPrompt extends Base {
 
       let choiceStr = choice.key + ') ' + choice.name;
       if (this.selectedKey === choice.key) {
-        choiceStr = pc.cyan(choiceStr);
+        choiceStr = colors.cyan(choiceStr);
       }
 
       output += choiceStr;
@@ -258,7 +258,7 @@ function renderChoices(choices, pointer) {
 
     let choiceStr = choice.key + ') ' + choice.name;
     if (pointer === choice.key) {
-      choiceStr = pc.cyan(choiceStr);
+      choiceStr = colors.cyan(choiceStr);
     }
 
     output += choiceStr;