console-toolkit 1.2.8 → 1.2.10

package/src/box.d.ts

@@ -0,0 +1,160 @@
+import {ClipOptions} from './strings/clip.js';
+import {StringsInput} from './strings.js';
+
+/** Options for `Box.make()`. */
+export interface BoxMakeOptions {
+  /** Padding character (default: ' '). */
+  symbol?: string;
+  /** Horizontal alignment for shorter strings (default: 'left'). */
+  align?: 'left' | 'l' | 'right' | 'r' | 'center' | 'c';
+}
+
+/** Options for `Box.addBottom()`. */
+export interface AddBottomOptions {
+  /** Padding character (default: ' '). */
+  symbol?: string;
+  /** Horizontal alignment (default: 'left'). */
+  align?: 'left' | 'l' | 'right' | 'r' | 'center' | 'c';
+}
+
+/** Options for `Box.addRight()`. */
+export interface AddRightOptions {
+  /** Padding character (default: ' '). */
+  symbol?: string;
+  /** Vertical alignment (default: 'top'). */
+  align?: 'top' | 't' | 'bottom' | 'b' | 'center' | 'c';
+}
+
+/** A rectangular text container that normalizes string arrays so all lines have the same display width.
+ * @see {@link https://github.com/uhop/console-toolkit/wiki/Module:-box}
+ */
+export class Box {
+  /** The array of strings representing the box content. */
+  box: string[];
+
+  /** Creates a Box from a string, string array, or another Box.
+   * @param s - Input data: a Box (copied), a string array, or a string.
+   * @param normalized - If true, assume strings are already equal width.
+   */
+  constructor(s: Box | string | string[], normalized?: boolean);
+
+  /** The display width of the box in columns. */
+  readonly width: number;
+  /** The number of lines in the box. */
+  readonly height: number;
+
+  /** Creates a Box from various input types.
+   * @param s - Input: Box, object with `toBox()`/`toPanel()`, function, string, or string array.
+   * @param options - Make options.
+   * @returns A new Box instance.
+   */
+  static make(s: StringsInput, options?: BoxMakeOptions): Box;
+  /** Creates a blank Box filled with a symbol.
+   * @param width - Width in columns.
+   * @param height - Height in rows.
+   * @param symbol - Fill character (default: ' ').
+   * @returns A new blank Box.
+   */
+  static makeBlank(width: number, height: number, symbol?: string): Box;
+
+  /** Returns the box content as a string array.
+   * @returns The array of strings.
+   */
+  toStrings(): string[];
+  /** Returns a clone of this Box.
+   * @returns A new Box copy.
+   */
+  toBox(): Box;
+  /** Creates a copy of this Box.
+   * @returns A new Box copy.
+   */
+  clone(): Box;
+  /** Clips the box to a given width.
+   * @param width - Maximum display width.
+   * @param options - Clip options.
+   * @returns A new clipped Box.
+   */
+  clip(width: number, options?: ClipOptions): Box;
+
+  /** Pads the left and right sides with a symbol.
+   * @param left - Left padding columns.
+   * @param right - Right padding columns.
+   * @param symbol - Pad character.
+   * @returns A new padded Box.
+   */
+  padLeftRight(left: number, right: number, symbol?: string): Box;
+  /** Pads the top and bottom with a symbol.
+   * @param top - Top padding rows.
+   * @param bottom - Bottom padding rows.
+   * @param symbol - Pad character.
+   * @returns A new padded Box.
+   */
+  padTopBottom(top: number, bottom: number, symbol?: string): Box;
+  /** Pads the right side.
+   * @param n - Columns.
+   * @param symbol - Pad character.
+   * @returns A new padded Box.
+   */
+  padRight(n: number, symbol?: string): Box;
+  /** Pads the left side.
+   * @param n - Columns.
+   * @param symbol - Pad character.
+   * @returns A new padded Box.
+   */
+  padLeft(n: number, symbol?: string): Box;
+  /** Pads the top.
+   * @param n - Rows.
+   * @param symbol - Pad character.
+   * @returns A new padded Box.
+   */
+  padTop(n: number, symbol?: string): Box;
+  /** Pads the bottom.
+   * @param n - Rows.
+   * @param symbol - Pad character.
+   * @returns A new padded Box.
+   */
+  padBottom(n: number, symbol?: string): Box;
+  /** Pads using CSS-style shorthand (top, right, bottom, left).
+   * @param t - Top padding.
+   * @param r - Right padding (or symbol).
+   * @param b - Bottom padding (or symbol).
+   * @param l - Left padding (or symbol).
+   * @param symbol - Pad character.
+   * @returns A new padded Box.
+   */
+  pad(t: number, r?: number | string, b?: number | string, l?: number | string, symbol?: string): Box;
+
+  /** Removes `n` rows starting at row `y`.
+   * @param y - Starting row index.
+   * @param n - Number of rows to remove.
+   * @returns A new Box with the specified rows removed.
+   */
+  removeRows(y: number, n: number): Box;
+
+  /** Appends another box below this one.
+   * @param box - Input convertible to a Box.
+   * @param options - Alignment and padding options.
+   * @returns A new combined Box.
+   */
+  addBottom(box: StringsInput, options?: AddBottomOptions): Box;
+  /** Appends another box to the right of this one.
+   * @param box - Input convertible to a Box.
+   * @param options - Alignment and padding options.
+   * @returns A new combined Box.
+   */
+  addRight(box: StringsInput, options?: AddRightOptions): Box;
+
+  /** Flips the box vertically.
+   * @returns A new vertically flipped Box.
+   */
+  flipV(): Box;
+}
+
+/** Alias for `Box.make()`. Creates a Box from various input types.
+ * @param s - Input convertible to a Box.
+ * @param options - Make options.
+ * @returns A new Box instance.
+ */
+export function toBox(s: StringsInput, options?: BoxMakeOptions): Box;
+
+export default Box;

package/src/box.js

@@ -1,7 +1,15 @@
 import {addAlias} from './meta.js';
 import {getLength, clipStrings, toStrings} from './strings.js';
 
+/** A rectangular text container where all strings have equal display width.
+ * Provides methods for padding, stacking, clipping, and flipping.
+ * @see {@link https://github.com/uhop/console-toolkit/wiki/Module:-box}
+ */
 export class Box {
+  /** Creates a new Box.
+   * @param {Box|string|string[]|*} s - Input data. If a Box, it is copied. If `normalized` is true, the array is used as-is.
+   * @param {boolean} [normalized=false] - If true, assumes strings are already equal width and takes ownership of the array.
+   */
   constructor(s, normalized) {
     if (s instanceof Box) {
       this.box = [...s.box]; // copy
@@ -10,13 +18,22 @@ export class Box {
     }
   }
 
+  /** The display width of the box (length of the first string, or 0 if empty). */
   get width() {
     return this.box.length ? getLength(this.box[0]) : 0;
   }
+  /** The number of rows in the box. */
   get height() {
     return this.box.length;
   }
 
+  /** Creates a Box from various input types.
+   * @param {import('./strings.js').StringsInput} s - Input: Box, object with toBox()/toPanel(), function, string, array, etc.
+   * @param {object} [options] - Options.
+   * @param {string} [options.symbol=' '] - The padding character.
+   * @param {'left'|'l'|'right'|'r'|'center'|'c'} [options.align='left'] - Alignment for shorter strings.
+   * @returns {Box} A new Box instance.
+   */
   static make(s, options) {
     main: for (;;) {
       switch (typeof s) {
@@ -38,7 +55,7 @@ export class Box {
 
     const {symbol = ' ', align = 'left'} = options || {},
       widths = s.map(s => getLength(s)),
-      width = Math.max(0, ...widths);
+      width = widths.reduce((a, b) => (a > b ? a : b), 0);
     switch (align) {
       case 'left':
       case 'l':
@@ -66,40 +83,72 @@ export class Box {
     );
   }
 
+  /** Creates a blank Box filled with a symbol.
+   * @param {number} width - The width of the box.
+   * @param {number} height - The height of the box.
+   * @param {string} [symbol=' '] - The fill character.
+   * @returns {Box} A new blank Box.
+   */
   static makeBlank(width, height, symbol = ' ') {
     return new Box(height <= 0 ? [] : new Array(height).fill(symbol.repeat(width)), true);
   }
 
+  /** Returns the underlying array of strings.
+   * @returns {string[]} The box content.
+   */
   toStrings() {
     return this.box;
   }
 
+  /** Creates a shallow copy of this Box.
+   * @returns {Box} A new Box with the same content.
+   */
   clone() {
     return new Box(this);
   }
 
+  /** Clips all strings to a given display width.
+   * @param {number} width - The maximum display width.
+   * @param {object} [options] - Options passed to `clip()`.
+   * @returns {Box} A new clipped Box.
+   */
   clip(width, options) {
     return Box.make(clipStrings(this.box, width, options));
   }
 
   // padding
 
+  /** Pads the box on both left and right sides.
+   * @param {number} left - Left padding amount.
+   * @param {number} right - Right padding amount.
+   * @param {string} [symbol=' '] - The padding character.
+   * @returns {Box} A new padded Box.
+   */
   padLeftRight(left, right, symbol = ' ') {
-    const paddingSmall = symbol.repeat(Math.min(left, right)),
-      paddingLarge = paddingSmall + symbol.repeat(Math.max(left - right, right - left));
+    const paddingLeft = symbol.repeat(left),
+      paddingRight = symbol.repeat(right);
     return new Box(
-      left < right
-        ? this.box.map(s => paddingSmall + s + paddingLarge)
-        : this.box.map(s => paddingLarge + s + paddingSmall),
+      this.box.map(s => paddingLeft + s + paddingRight),
       true
     );
   }
 
+  /** Pads the box on both top and bottom sides.
+   * @param {number} top - Top padding amount (number of rows).
+   * @param {number} bottom - Bottom padding amount (number of rows).
+   * @param {string} [symbol=' '] - The padding character.
+   * @returns {Box} A new padded Box.
+   */
   padTopBottom(top, bottom, symbol = ' ') {
     const padding = symbol.repeat(this.width);
     return new Box([...new Array(top).fill(padding), ...this.box, ...new Array(bottom).fill(padding)], true);
   }
 
+  /** Pads the box on the right side.
+   * @param {number} n - Right padding amount.
+   * @param {string} [symbol=' '] - The padding character.
+   * @returns {Box} A new padded Box.
+   */
   padRight(n, symbol = ' ') {
     const padding = symbol.repeat(n);
     return new Box(
@@ -108,6 +157,11 @@ export class Box {
     );
   }
 
+  /** Pads the box on the left side.
+   * @param {number} n - Left padding amount.
+   * @param {string} [symbol=' '] - The padding character.
+   * @returns {Box} A new padded Box.
+   */
   padLeft(n, symbol = ' ') {
     const padding = symbol.repeat(n);
     return new Box(
@@ -116,27 +170,49 @@ export class Box {
     );
   }
 
+  /** Pads the box on the top side.
+   * @param {number} n - Top padding amount (number of rows).
+   * @param {string} [symbol=' '] - The padding character.
+   * @returns {Box} A new padded Box.
+   */
   padTop(n, symbol = ' ') {
     const padding = symbol.repeat(this.width);
     return new Box([...new Array(n).fill(padding), ...this.box], true);
   }
 
+  /** Pads the box on the bottom side.
+   * @param {number} n - Bottom padding amount (number of rows).
+   * @param {string} [symbol=' '] - The padding character.
+   * @returns {Box} A new padded Box.
+   */
   padBottom(n, symbol = ' ') {
     const padding = symbol.repeat(this.width);
     return new Box([...this.box, ...new Array(n).fill(padding)], true);
   }
 
+  /** Pads the box on all sides (CSS padding order: top, right, bottom, left).
+   * - `pad(t)` → equal padding on all sides.
+   * - `pad(t, r)` → top/bottom = t, left/right = r.
+   * - `pad(t, r, b)` → top = t, left/right = r, bottom = b.
+   * - `pad(t, r, b, l)` → individual padding.
+   * @param {number} t - Top padding.
+   * @param {number|string} [r] - Right padding or symbol.
+   * @param {number|string} [b] - Bottom padding or symbol.
+   * @param {number|string} [l] - Left padding or symbol.
+   * @param {string} [symbol=' '] - The padding character.
+   * @returns {Box} A new padded Box.
+   */
   pad(t, r, b, l, symbol = ' ') {
     // implemented the CSS padding order
     if (typeof r != 'number') {
-      symbol = r;
+      symbol = r || symbol;
       r = b = l = t;
     } else if (typeof b != 'number') {
-      symbol = b;
+      symbol = b || symbol;
       l = r;
       b = t;
     } else if (typeof l != 'number') {
-      symbol = l;
+      symbol = l || symbol;
       l = r;
     }
     return this.padLeftRight(l, r, symbol).padTopBottom(t, b, symbol);
@@ -144,6 +220,11 @@ export class Box {
 
   // removing
 
+  /** Removes rows from the box.
+   * @param {number} y - The starting row index.
+   * @param {number} n - The number of rows to remove.
+   * @returns {Box} A new Box with rows removed.
+   */
   removeRows(y, n) {
     const result = [...this.box];
     result.splice(y, n);
@@ -152,6 +233,13 @@ export class Box {
 
   // stack
 
+  /** Stacks another box below this one.
+   * @param {import('./strings.js').StringsInput} box - The box to add at the bottom.
+   * @param {object} [options] - Options.
+   * @param {string} [options.symbol=' '] - The padding character for width alignment.
+   * @param {'left'|'l'|'right'|'r'|'center'|'c'} [options.align='left'] - Horizontal alignment if widths differ.
+   * @returns {Box} A new combined Box.
+   */
   addBottom(box, {symbol = ' ', align = 'left'} = {}) {
     let a = this,
       b = toBox(box);
@@ -170,7 +258,7 @@ export class Box {
           break;
         default: // center
           const half = d >> 1;
-          x = x.padLeftRight(half, half + (d & 1 ? 1 : 0));
+          x = x.padLeftRight(half, half + (d & 1 ? 1 : 0), symbol);
           break;
       }
       a = diff < 0 ? x : a;
@@ -179,7 +267,15 @@ export class Box {
     return new Box([...a.box, ...b.box], true);
   }
 
+  /** Stacks another box to the right of this one.
+   * @param {import('./strings.js').StringsInput} box - The box to add on the right.
+   * @param {object} [options] - Options.
+   * @param {string} [options.symbol=' '] - The padding character for height alignment.
+   * @param {'top'|'t'|'bottom'|'b'|'center'|'c'} [options.align='top'] - Vertical alignment if heights differ.
+   * @returns {Box} A new combined Box.
+   */
   addRight(box, {symbol = ' ', align = 'top'} = {}) {
+    box = toBox(box);
     const ah = this.height,
       bh = box.height;
     if (ah == bh)
@@ -240,14 +336,19 @@ export class Box {
 
   // flipping
 
+  /** Flips the box vertically (reverses the row order).
+   * @returns {Box} A new vertically flipped Box.
+   */
   flipV() {
-    // return new Box(this.box.toReversed(), true);
-    return new Box([...this.box].reverse(), true);
+    return new Box(this.box.toReversed(), true);
   }
 }
 
 addAlias(Box, 'toBox', 'clone');
 
+/** Alias for `Box.make()`. Converts its argument to a Box.
+ * @type {typeof Box.make}
+ */
 export const toBox = Box.make;
 
 export default Box;

package/src/charts/bars/block-frac-grouped.d.ts

@@ -0,0 +1,12 @@
+import {ChartDataInput} from '../utils.js';
+import {GroupedChartOptions} from './draw-grouped.js';
+
+/** Draws a complete fractional block grouped bar chart.
+ * @param values - Chart data.
+ * @param width - Available width.
+ * @param options - Options.
+ * @returns Array of strings representing the chart.
+ */
+export function drawChart(values: ChartDataInput, width: number, options?: GroupedChartOptions): string[];
+
+export default drawChart;

package/src/charts/bars/block-frac-grouped.js

@@ -1,6 +1,12 @@
 import {drawRow} from './block-frac.js';
 import drawGroupedChart from './draw-grouped.js';
 
+/** Draws a complete fractional block grouped bar chart.
+ * @param {any[]} values - Chart data.
+ * @param {number} width - Available width.
+ * @param {object} [options] - Options.
+ * @returns {string[]} Array of strings representing the chart.
+ */
 export const drawChart = drawGroupedChart(drawRow);
 
 export default drawChart;

package/src/charts/bars/block-frac.d.ts

@@ -0,0 +1,34 @@
+import {ChartDatum, ChartDataInput} from '../utils.js';
+import {SgrState} from '../../ansi/sgr-state.js';
+import {StackedChartOptions} from './draw-stacked.js';
+
+/** Options for fractional block bar charts. */
+export interface BlockFracBarOptions extends StackedChartOptions {
+  /** Size of each rectangle in characters. */
+  rectSize?: number;
+  /** Initial SGR state. */
+  initState?: SgrState | string | null;
+  /** If true, reverse the drawing direction. */
+  reverse?: boolean;
+  /** If true, draw an empty border when fractional part is 0. */
+  drawEmptyBorder?: boolean;
+}
+
+/** Draws a single stacked bar row using fractional block characters.
+ * @param data - Chart data items.
+ * @param width - Available width.
+ * @param maxValue - Maximum value.
+ * @param options - Options.
+ * @returns Array of strings for the row.
+ */
+export function drawRow(data: ChartDatum[], width: number, maxValue: number, options?: BlockFracBarOptions): string[];
+
+/** Draws a complete fractional block stacked bar chart.
+ * @param values - Chart data.
+ * @param width - Available width.
+ * @param options - Options.
+ * @returns Array of strings representing the chart.
+ */
+export function drawChart(values: ChartDataInput, width: number, options?: BlockFracBarOptions): string[];
+
+export default drawChart;

package/src/charts/bars/block-frac.js

@@ -8,6 +8,13 @@ import {drawRealHeightBlock} from '../../draw-block-frac.js';
 // data = [datum]
 // datum = {value, colorState, symbol, state}
 
+/** Draws a single stacked bar row using fractional block characters.
+ * @param {object[]} data - Normalized data series.
+ * @param {number} width - Total width.
+ * @param {number} maxValue - Maximum value for scaling.
+ * @param {object} [options] - Options including `reverse`, `drawEmptyBorder`, `rectSize`, `initState`.
+ * @returns {string[]} The drawn row lines.
+ */
 export const drawRow = (data, width, maxValue, options = {}) => {
   const {reverse, drawEmptyBorder, initState = {}} = options,
     rectSize = Math.max(0, options.rectSize ?? 0.5),
@@ -31,6 +38,12 @@ export const drawRow = (data, width, maxValue, options = {}) => {
   return result.map(line => optimize(line));
 };
 
+/** Draws a complete fractional block stacked bar chart.
+ * @param {any[]} values - Chart data.
+ * @param {number} width - Available width.
+ * @param {object} [options] - Options.
+ * @returns {string[]} Array of strings representing the chart.
+ */
 export const drawChart = drawStackedChart(drawRow);
 
 export default drawChart;

package/src/charts/bars/block-grouped.d.ts

@@ -0,0 +1,12 @@
+import {ChartDataInput} from '../utils.js';
+import {GroupedChartOptions} from './draw-grouped.js';
+
+/** Draws a complete block grouped bar chart.
+ * @param values - Chart data.
+ * @param width - Available width.
+ * @param options - Options.
+ * @returns Array of strings representing the chart.
+ */
+export function drawChart(values: ChartDataInput, width: number, options?: GroupedChartOptions): string[];
+
+export default drawChart;

package/src/charts/bars/block-grouped.js

@@ -1,6 +1,12 @@
 import {drawRow} from './block.js';
 import drawGroupedChart from './draw-grouped.js';
 
+/** Draws a complete block grouped bar chart.
+ * @param {any[]} values - Chart data.
+ * @param {number} width - Available width.
+ * @param {object} [options] - Options.
+ * @returns {string[]} Array of strings representing the chart.
+ */
 export const drawChart = drawGroupedChart(drawRow);
 
 export default drawChart;

package/src/charts/bars/block.d.ts

@@ -0,0 +1,43 @@
+import {ChartDatum, ChartDataInput} from '../utils.js';
+import {SgrState} from '../../ansi/sgr-state.js';
+import {LineTheme} from '../../themes/utils.js';
+import {StackedChartOptions} from './draw-stacked.js';
+
+/** Options for block bar charts. */
+export interface BlockBarOptions extends StackedChartOptions {
+  /** Block theme for drawing. */
+  blockTheme?: LineTheme;
+  /** Size of each rectangle in characters. */
+  rectSize?: number;
+  /** Initial SGR state. */
+  initState?: SgrState | string | null;
+  /** If true, reverse the drawing direction. */
+  reverse?: boolean;
+  /** If set, draw the top border. */
+  t?: number;
+  /** If set, draw the bottom border. */
+  b?: number;
+  /** If set, draw the left border. */
+  l?: number;
+  /** If set, draw the right border. */
+  r?: number;
+}
+
+/** Draws a single stacked bar row using block-drawing characters.
+ * @param data - Chart data items.
+ * @param width - Available width.
+ * @param maxValue - Maximum value.
+ * @param options - Block bar options.
+ * @returns Array of strings for the row.
+ */
+export function drawRow(data: ChartDatum[], width: number, maxValue: number, options?: BlockBarOptions): string[];
+
+/** Draws a complete block stacked bar chart.
+ * @param values - Chart data.
+ * @param width - Available width.
+ * @param options - Block bar options.
+ * @returns Array of strings representing the chart.
+ */
+export function drawChart(values: ChartDataInput, width: number, options?: BlockBarOptions): string[];
+
+export default drawChart;

package/src/charts/bars/block.js

@@ -9,6 +9,13 @@ import defaultBlockTheme from '../../themes/blocks/unicode-half.js';
 // data = [datum]
 // datum = {value, colorState, symbol, state}
 
+/** Draws a single stacked bar row using block-drawing characters.
+ * @param {object[]} data - Normalized data series.
+ * @param {number} width - Total width.
+ * @param {number} maxValue - Maximum value for scaling.
+ * @param {object} [options] - Options including `reverse`, `blockTheme`, `rectSize`, `initState`.
+ * @returns {string[]} The drawn row lines.
+ */
 export const drawRow = (data, width, maxValue, options = {}) => {
   const {reverse, blockTheme = defaultBlockTheme, rectSize = 0, initState = {}} = options,
     sizes = allocateSizes(data, maxValue, width),
@@ -38,6 +45,12 @@ export const drawRow = (data, width, maxValue, options = {}) => {
   return result.map(line => optimize(line));
 };
 
+/** Draws a complete block stacked bar chart.
+ * @param {any[]} values - Chart data.
+ * @param {number} width - Available width.
+ * @param {object} [options] - Block bar options.
+ * @returns {string[]} Array of strings representing the chart.
+ */
 export const drawChart = drawStackedChart(drawRow);
 
 export default drawChart;

package/src/charts/bars/draw-grouped.d.ts

@@ -0,0 +1,41 @@
+import {ChartDatum, ChartDataInput, ChartTheme} from '../utils.js';
+import {SgrState} from '../../ansi/sgr-state.js';
+
+/** Options for grouped bar/column charts. */
+export interface GroupedChartOptions {
+  /** Maximum value for scaling (default: auto). */
+  maxValue?: number;
+  /** Gap between groups in lines. */
+  groupGap?: number;
+  /** Gap between items within a group. */
+  gap?: number;
+  /** Chart theme. */
+  theme?: ChartTheme;
+  /** Size of each rectangle in characters. */
+  rectSize?: number;
+  /** Initial SGR state. */
+  initState?: SgrState | string | null;
+  /** If true, reverse the drawing direction. */
+  reverse?: boolean;
+  /** Additional custom options. */
+  [key: string]: unknown;
+}
+
+/** Function that draws a single row of a chart.
+ * @param data - Array of chart data items.
+ * @param width - Available width in characters.
+ * @param maxValue - Maximum value for scaling.
+ * @param options - Optional chart options.
+ * @returns The drawn row as a string or string array.
+ */
+type DrawRowFn = (data: ChartDatum[], width: number, maxValue: number, options?: GroupedChartOptions) => string | string[];
+
+/** Creates a grouped bar chart drawing function from a row-drawing function.
+ * @param drawRow - The row-drawing function.
+ * @returns A chart-drawing function.
+ */
+export function drawChart(
+  drawRow: DrawRowFn
+): (values: ChartDataInput, width: number, options?: GroupedChartOptions) => string[];
+
+export default drawChart;

package/src/charts/bars/draw-grouped.js

@@ -1,6 +1,10 @@
 import defaultTheme from '../themes/default.js';
 import {normalizeData} from '../utils.js';
 
+/** Creates a grouped bar chart drawing function from a row-drawing function.
+ * @param {Function} drawRow - Function `(data, width, maxValue, options) => string|string[]`.
+ * @returns {Function} Chart drawing function `(values, width, options) => string[]`.
+ */
 export const drawChart =
   drawRow =>
   (values, width, options = {}) => {