ink 6.0.1 → 6.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/BackgroundContext.d.ts +4 -0
- package/build/components/BackgroundContext.js +3 -0
- package/build/components/BackgroundContext.js.map +1 -0
- package/build/components/Box.d.ts +1 -0
- package/build/components/Box.js +9 -2
- package/build/components/Box.js.map +1 -1
- package/build/components/Text.js +7 -3
- package/build/components/Text.js.map +1 -1
- package/build/hooks/use-input.js +1 -1
- package/build/hooks/use-input.js.map +1 -1
- package/build/measure-text.js +5 -4
- package/build/measure-text.js.map +1 -1
- package/build/render-background.d.ts +4 -0
- package/build/render-background.js +25 -0
- package/build/render-background.js.map +1 -0
- package/build/render-node-to-output.js +2 -0
- package/build/render-node-to-output.js.map +1 -1
- package/build/styles.d.ts +6 -0
- package/build/styles.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +55 -6
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { type LiteralUnion } from 'type-fest';
|
|
2
|
+
import { type ForegroundColorName } from 'ansi-styles';
|
|
3
|
+
export type BackgroundColor = LiteralUnion<ForegroundColorName, string>;
|
|
4
|
+
export declare const backgroundContext: import("react").Context<BackgroundColor | undefined>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BackgroundContext.js","sourceRoot":"","sources":["../../src/components/BackgroundContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAMpC,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC7C,SAAS,CACT,CAAC"}
|
|
@@ -56,6 +56,7 @@ declare const Box: React.ForwardRefExoticComponent<{
|
|
|
56
56
|
readonly overflow?: "visible" | "hidden" | undefined;
|
|
57
57
|
readonly overflowX?: "visible" | "hidden" | undefined;
|
|
58
58
|
readonly overflowY?: "visible" | "hidden" | undefined;
|
|
59
|
+
readonly backgroundColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
|
|
59
60
|
} & {
|
|
60
61
|
children?: React.ReactNode | undefined;
|
|
61
62
|
} & React.RefAttributes<DOMElement>>;
|
package/build/components/Box.js
CHANGED
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
+
import { backgroundContext } from './BackgroundContext.js';
|
|
2
3
|
/**
|
|
3
4
|
* `<Box>` is an essential Ink component to build your layout. It's like `<div style="display: flex">` in the browser.
|
|
4
5
|
*/
|
|
5
|
-
const Box = forwardRef(({ children, ...style }, ref) => {
|
|
6
|
-
|
|
6
|
+
const Box = forwardRef(({ children, backgroundColor, ...style }, ref) => {
|
|
7
|
+
const boxElement = (React.createElement("ink-box", { ref: ref, style: {
|
|
7
8
|
flexWrap: 'nowrap',
|
|
8
9
|
flexDirection: 'row',
|
|
9
10
|
flexGrow: 0,
|
|
10
11
|
flexShrink: 1,
|
|
11
12
|
...style,
|
|
13
|
+
backgroundColor,
|
|
12
14
|
overflowX: style.overflowX ?? style.overflow ?? 'visible',
|
|
13
15
|
overflowY: style.overflowY ?? style.overflow ?? 'visible',
|
|
14
16
|
} }, children));
|
|
17
|
+
// If this Box has a background color, provide it to children via context
|
|
18
|
+
if (backgroundColor) {
|
|
19
|
+
return (React.createElement(backgroundContext.Provider, { value: backgroundColor }, boxElement));
|
|
20
|
+
}
|
|
21
|
+
return boxElement;
|
|
15
22
|
});
|
|
16
23
|
Box.displayName = 'Box';
|
|
17
24
|
export default Box;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/components/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAyB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/components/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAyB,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAIzD;;GAEG;AACH,MAAM,GAAG,GAAG,UAAU,CACrB,CAAC,EAAC,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE;IAC9C,MAAM,UAAU,GAAG,CAClB,iCACC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACN,QAAQ,EAAE,QAAQ;YAClB,aAAa,EAAE,KAAK;YACpB,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,GAAG,KAAK;YACR,eAAe;YACf,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,QAAQ,IAAI,SAAS;YACzD,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,QAAQ,IAAI,SAAS;SACzD,IAEA,QAAQ,CACA,CACV,CAAC;IAEF,yEAAyE;IACzE,IAAI,eAAe,EAAE,CAAC;QACrB,OAAO,CACN,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,IAChD,UAAU,CACiB,CAC7B,CAAC;IACH,CAAC;IAED,OAAO,UAAU,CAAC;AACnB,CAAC,CACD,CAAC;AAEF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;AAExB,eAAe,GAAG,CAAC"}
|
package/build/components/Text.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
2
|
import chalk from 'chalk';
|
|
3
3
|
import colorize from '../colorize.js';
|
|
4
|
+
import { backgroundContext } from './BackgroundContext.js';
|
|
4
5
|
/**
|
|
5
6
|
* This component can display text, and change its style to make it colorful, bold, underline, italic or strikethrough.
|
|
6
7
|
*/
|
|
7
8
|
export default function Text({ color, backgroundColor, dimColor = false, bold = false, italic = false, underline = false, strikethrough = false, inverse = false, wrap = 'wrap', children, }) {
|
|
9
|
+
const inheritedBackgroundColor = useContext(backgroundContext);
|
|
8
10
|
if (children === undefined || children === null) {
|
|
9
11
|
return null;
|
|
10
12
|
}
|
|
@@ -15,8 +17,10 @@ export default function Text({ color, backgroundColor, dimColor = false, bold =
|
|
|
15
17
|
if (color) {
|
|
16
18
|
children = colorize(children, color, 'foreground');
|
|
17
19
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
// Use explicit backgroundColor if provided, otherwise use inherited from parent Box
|
|
21
|
+
const effectiveBackgroundColor = backgroundColor ?? inheritedBackgroundColor;
|
|
22
|
+
if (effectiveBackgroundColor) {
|
|
23
|
+
children = colorize(children, effectiveBackgroundColor, 'background');
|
|
20
24
|
}
|
|
21
25
|
if (bold) {
|
|
22
26
|
children = chalk.bold(children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAiB,MAAM,OAAO,CAAC;AACxD,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAqDzD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC5B,KAAK,EACL,eAAe,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,KAAK,EACZ,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,KAAK,EACrB,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,MAAM,EACb,QAAQ,GACD;IACP,MAAM,wBAAwB,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC/D,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;QACjD,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,SAAS,GAAG,CAAC,QAAgB,EAAU,EAAE;QAC9C,IAAI,QAAQ,EAAE,CAAC;YACd,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,KAAK,EAAE,CAAC;YACX,QAAQ,GAAG,QAAQ,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC;QACpD,CAAC;QAED,oFAAoF;QACpF,MAAM,wBAAwB,GAC7B,eAAe,IAAI,wBAAwB,CAAC;QAC7C,IAAI,wBAAwB,EAAE,CAAC;YAC9B,QAAQ,GAAG,QAAQ,CAAC,QAAQ,EAAE,wBAAwB,EAAE,YAAY,CAAC,CAAC;QACvE,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACV,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACZ,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC;QAED,IAAI,SAAS,EAAE,CAAC;YACf,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,aAAa,EAAE,CAAC;YACnB,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACb,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACpC,CAAC;QAED,OAAO,QAAQ,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACN,kCACC,KAAK,EAAE,EAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAC,EACzE,kBAAkB,EAAE,SAAS,IAE5B,QAAQ,CACC,CACX,CAAC;AACH,CAAC"}
|
package/build/hooks/use-input.js
CHANGED
|
@@ -80,7 +80,7 @@ const useInput = (inputHandler, options = {}) => {
|
|
|
80
80
|
}
|
|
81
81
|
// If app is not supposed to exit on Ctrl+C, then let input listener handle it
|
|
82
82
|
if (!(input === 'c' && key.ctrl) || !internal_exitOnCtrlC) {
|
|
83
|
-
// @ts-expect-error TypeScript types for `batchedUpdates` require an argument, but React's codebase doesn't provide it and it works without it as
|
|
83
|
+
// @ts-expect-error TypeScript types for `batchedUpdates` require an argument, but React's codebase doesn't provide it and it works without it as expected.
|
|
84
84
|
reconciler.batchedUpdates(() => {
|
|
85
85
|
inputHandler(input, key);
|
|
86
86
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-input.js","sourceRoot":"","sources":["../../src/hooks/use-input.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"use-input.js","sourceRoot":"","sources":["../../src/hooks/use-input.ts"],"names":[],"mappings":"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"}
|
package/build/measure-text.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import widestLine from 'widest-line';
|
|
2
|
-
const cache =
|
|
2
|
+
const cache = new Map();
|
|
3
3
|
const measureText = (text) => {
|
|
4
4
|
if (text.length === 0) {
|
|
5
5
|
return {
|
|
@@ -7,14 +7,15 @@ const measureText = (text) => {
|
|
|
7
7
|
height: 0,
|
|
8
8
|
};
|
|
9
9
|
}
|
|
10
|
-
const cachedDimensions = cache
|
|
10
|
+
const cachedDimensions = cache.get(text);
|
|
11
11
|
if (cachedDimensions) {
|
|
12
12
|
return cachedDimensions;
|
|
13
13
|
}
|
|
14
14
|
const width = widestLine(text);
|
|
15
15
|
const height = text.split('\n').length;
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
const dimensions = { width, height };
|
|
17
|
+
cache.set(text, dimensions);
|
|
18
|
+
return dimensions;
|
|
18
19
|
};
|
|
19
20
|
export default measureText;
|
|
20
21
|
//# sourceMappingURL=measure-text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"measure-text.js","sourceRoot":"","sources":["../src/measure-text.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAErC,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"measure-text.js","sourceRoot":"","sources":["../src/measure-text.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAErC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAkB,CAAC;AAOxC,MAAM,WAAW,GAAG,CAAC,IAAY,EAAU,EAAE;IAC5C,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO;YACN,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACT,CAAC;IACH,CAAC;IAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAEzC,IAAI,gBAAgB,EAAE,CAAC;QACtB,OAAO,gBAAgB,CAAC;IACzB,CAAC;IAED,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC;IACvC,MAAM,UAAU,GAAG,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC;IACnC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAE5B,OAAO,UAAU,CAAC;AACnB,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import colorize from './colorize.js';
|
|
2
|
+
const renderBackground = (x, y, node, output) => {
|
|
3
|
+
if (!node.style.backgroundColor) {
|
|
4
|
+
return;
|
|
5
|
+
}
|
|
6
|
+
const width = node.yogaNode.getComputedWidth();
|
|
7
|
+
const height = node.yogaNode.getComputedHeight();
|
|
8
|
+
// Calculate the actual content area considering borders
|
|
9
|
+
const leftBorderWidth = node.style.borderStyle && node.style.borderLeft !== false ? 1 : 0;
|
|
10
|
+
const rightBorderWidth = node.style.borderStyle && node.style.borderRight !== false ? 1 : 0;
|
|
11
|
+
const topBorderHeight = node.style.borderStyle && node.style.borderTop !== false ? 1 : 0;
|
|
12
|
+
const bottomBorderHeight = node.style.borderStyle && node.style.borderBottom !== false ? 1 : 0;
|
|
13
|
+
const contentWidth = width - leftBorderWidth - rightBorderWidth;
|
|
14
|
+
const contentHeight = height - topBorderHeight - bottomBorderHeight;
|
|
15
|
+
if (!(contentWidth > 0 && contentHeight > 0)) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
// Create background fill for each row
|
|
19
|
+
const backgroundLine = colorize(' '.repeat(contentWidth), node.style.backgroundColor, 'background');
|
|
20
|
+
for (let row = 0; row < contentHeight; row++) {
|
|
21
|
+
output.write(x + leftBorderWidth, y + topBorderHeight + row, backgroundLine, { transformers: [] });
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
export default renderBackground;
|
|
25
|
+
//# sourceMappingURL=render-background.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"render-background.js","sourceRoot":"","sources":["../src/render-background.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AAIrC,MAAM,gBAAgB,GAAG,CACxB,CAAS,EACT,CAAS,EACT,IAAa,EACb,MAAc,EACP,EAAE;IACT,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QACjC,OAAO;IACR,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,QAAS,CAAC,gBAAgB,EAAE,CAAC;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAS,CAAC,iBAAiB,EAAE,CAAC;IAElD,wDAAwD;IACxD,MAAM,eAAe,GACpB,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,MAAM,gBAAgB,GACrB,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpE,MAAM,eAAe,GACpB,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,kBAAkB,GACvB,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,KAAK,GAAG,eAAe,GAAG,gBAAgB,CAAC;IAChE,MAAM,aAAa,GAAG,MAAM,GAAG,eAAe,GAAG,kBAAkB,CAAC;IAEpE,IAAI,CAAC,CAAC,YAAY,GAAG,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC;QAC9C,OAAO;IACR,CAAC;IAED,sCAAsC;IACtC,MAAM,cAAc,GAAG,QAAQ,CAC9B,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,EACxB,IAAI,CAAC,KAAK,CAAC,eAAe,EAC1B,YAAY,CACZ,CAAC;IAEF,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,aAAa,EAAE,GAAG,EAAE,EAAE,CAAC;QAC9C,MAAM,CAAC,KAAK,CACX,CAAC,GAAG,eAAe,EACnB,CAAC,GAAG,eAAe,GAAG,GAAG,EACzB,cAAc,EACd,EAAC,YAAY,EAAE,EAAE,EAAC,CAClB,CAAC;IACH,CAAC;AACF,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -5,6 +5,7 @@ import wrapText from './wrap-text.js';
|
|
|
5
5
|
import getMaxWidth from './get-max-width.js';
|
|
6
6
|
import squashTextNodes from './squash-text-nodes.js';
|
|
7
7
|
import renderBorder from './render-border.js';
|
|
8
|
+
import renderBackground from './render-background.js';
|
|
8
9
|
// If parent container is `<Box>`, text nodes will be treated as separate nodes in
|
|
9
10
|
// the tree and will have their own coordinates in the layout.
|
|
10
11
|
// To ensure text nodes are aligned correctly, take X and Y of the first text node
|
|
@@ -56,6 +57,7 @@ const renderNodeToOutput = (node, output, options) => {
|
|
|
56
57
|
}
|
|
57
58
|
let clipped = false;
|
|
58
59
|
if (node.nodeName === 'ink-box') {
|
|
60
|
+
renderBackground(x, y, node, output);
|
|
59
61
|
renderBorder(x, y, node, output);
|
|
60
62
|
const clipHorizontally = node.style.overflowX === 'hidden' || node.style.overflow === 'hidden';
|
|
61
63
|
const clipVertically = node.style.overflowY === 'hidden' || node.style.overflow === 'hidden';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-node-to-output.js","sourceRoot":"","sources":["../src/render-node-to-output.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,eAAe,MAAM,wBAAwB,CAAC;AACrD,OAAO,YAAY,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"render-node-to-output.js","sourceRoot":"","sources":["../src/render-node-to-output.ts"],"names":[],"mappings":"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"}
|
package/build/styles.d.ts
CHANGED
|
@@ -238,6 +238,12 @@ export type Styles = {
|
|
|
238
238
|
* @default 'visible'
|
|
239
239
|
*/
|
|
240
240
|
readonly overflowY?: 'visible' | 'hidden';
|
|
241
|
+
/**
|
|
242
|
+
* Background color for the element.
|
|
243
|
+
*
|
|
244
|
+
* Accepts the same values as `color` in the `<Text>` component.
|
|
245
|
+
*/
|
|
246
|
+
readonly backgroundColor?: LiteralUnion<ForegroundColorName, string>;
|
|
241
247
|
};
|
|
242
248
|
declare const styles: (node: YogaNode, style?: Styles) => void;
|
|
243
249
|
export default styles;
|
package/build/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAIA,OAAO,IAA6B,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -69,14 +69,15 @@ render(<Counter />);
|
|
|
69
69
|
|
|
70
70
|
<img src="media/demo.svg" width="600">
|
|
71
71
|
|
|
72
|
-
You can also check it out live on [repl.it sandbox](https://ink-counter-demo.vadimdemedes.repl.run/).
|
|
73
72
|
Feel free to play around with the code and fork this repl at [https://repl.it/@vadimdemedes/ink-counter-demo](https://repl.it/@vadimdemedes/ink-counter-demo).
|
|
74
73
|
|
|
75
74
|
## Who's Using Ink?
|
|
76
75
|
|
|
77
|
-
- [Codex](https://github.com/openai/codex) - An
|
|
78
|
-
- [Claude Code](https://github.com/anthropics/claude-code) - An agentic coding tool made by Anthropic.
|
|
76
|
+
- [Codex](https://github.com/openai/codex) - An agentic coding tool, made by OpenAI.
|
|
77
|
+
- [Claude Code](https://github.com/anthropics/claude-code) - An agentic coding tool, made by Anthropic.
|
|
78
|
+
- [Gemini CLI](https://github.com/google-gemini/gemini-cli) - An agentic coding tool, made by Google.
|
|
79
79
|
- [GitHub Copilot for CLI](https://githubnext.com/projects/copilot-cli) - Just say what you want the shell to do.
|
|
80
|
+
- [Canva CLI](https://www.canva.dev/docs/apps/canva-cli/) - CLI for creating and managing Canva Apps.
|
|
80
81
|
- [Cloudflare's Wrangler](https://github.com/cloudflare/wrangler2) - The CLI for Cloudflare Workers.
|
|
81
82
|
- [Linear](https://linear.app) - Linear built an internal CLI for managing deployments, configs and other housekeeping tasks.
|
|
82
83
|
- [Gatsby](https://www.gatsbyjs.org) - Gatsby is a modern web framework for blazing fast websites.
|
|
@@ -119,6 +120,7 @@ Feel free to play around with the code and fork this repl at [https://repl.it/@v
|
|
|
119
120
|
- [Sudoku](https://github.com/mrozio13pl/sudoku-in-terminal) - Sudoku game.
|
|
120
121
|
- [Sea Trader](https://github.com/zyishai/sea-trader) - Taipan! inspired trading simulator game.
|
|
121
122
|
- [srtd](https://github.com/t1mmen/srtd) - Live-reloading SQL templates for Supabase projects.
|
|
123
|
+
- [tweakcc](https://github.com/Piebald-AI/tweakcc) - Customize your Claude Code styling.
|
|
122
124
|
|
|
123
125
|
## Contents
|
|
124
126
|
|
|
@@ -1155,6 +1157,52 @@ Default: `true`
|
|
|
1155
1157
|
|
|
1156
1158
|
Determines whether left border is visible.
|
|
1157
1159
|
|
|
1160
|
+
#### Background
|
|
1161
|
+
|
|
1162
|
+
##### backgroundColor
|
|
1163
|
+
|
|
1164
|
+
Type: `string`
|
|
1165
|
+
|
|
1166
|
+
Background color for the element.
|
|
1167
|
+
|
|
1168
|
+
Accepts the same values as [`color`](#color) in the `<Text>` component.
|
|
1169
|
+
|
|
1170
|
+
```jsx
|
|
1171
|
+
<Box flexDirection="column">
|
|
1172
|
+
<Box backgroundColor="red" width={20} height={5} alignSelf="flex-start">
|
|
1173
|
+
<Text>Red background</Text>
|
|
1174
|
+
</Box>
|
|
1175
|
+
|
|
1176
|
+
<Box backgroundColor="#FF8800" width={20} height={3} marginTop={1} alignSelf="flex-start">
|
|
1177
|
+
<Text>Orange background</Text>
|
|
1178
|
+
</Box>
|
|
1179
|
+
|
|
1180
|
+
<Box backgroundColor="rgb(0, 255, 0)" width={20} height={3} marginTop={1} alignSelf="flex-start">
|
|
1181
|
+
<Text>Green background</Text>
|
|
1182
|
+
</Box>
|
|
1183
|
+
</Box>
|
|
1184
|
+
```
|
|
1185
|
+
|
|
1186
|
+
The background color fills the entire `<Box>` area and is inherited by child `<Text>` components unless they specify their own `backgroundColor`.
|
|
1187
|
+
|
|
1188
|
+
```jsx
|
|
1189
|
+
<Box backgroundColor="blue" alignSelf="flex-start">
|
|
1190
|
+
<Text>Blue inherited </Text>
|
|
1191
|
+
<Text backgroundColor="yellow">Yellow override </Text>
|
|
1192
|
+
<Text>Blue inherited again</Text>
|
|
1193
|
+
</Box>
|
|
1194
|
+
```
|
|
1195
|
+
|
|
1196
|
+
Background colors work with borders and padding:
|
|
1197
|
+
|
|
1198
|
+
```jsx
|
|
1199
|
+
<Box backgroundColor="cyan" borderStyle="round" padding={1} alignSelf="flex-start">
|
|
1200
|
+
<Text>Background with border and padding</Text>
|
|
1201
|
+
</Box>
|
|
1202
|
+
```
|
|
1203
|
+
|
|
1204
|
+
See example in [examples/box-backgrounds](examples/box-backgrounds/box-backgrounds.tsx).
|
|
1205
|
+
|
|
1158
1206
|
### `<Newline>`
|
|
1159
1207
|
|
|
1160
1208
|
Adds one or more newline (`\n`) characters.
|
|
@@ -2100,7 +2148,7 @@ npx react-devtools
|
|
|
2100
2148
|
```
|
|
2101
2149
|
|
|
2102
2150
|
After it starts up, you should see the component tree of your CLI.
|
|
2103
|
-
You can even inspect and change the props of components, and see the results
|
|
2151
|
+
You can even inspect and change the props of components, and see the results immediately in the CLI, without restarting it.
|
|
2104
2152
|
|
|
2105
2153
|
**Note**: You must manually quit your CLI via <kbd>Ctrl</kbd>+<kbd>C</kbd> after you're done testing.
|
|
2106
2154
|
|
|
@@ -2127,6 +2175,7 @@ You can even inspect and change the props of components, and see the results imm
|
|
|
2127
2175
|
- [ink-form](https://github.com/lukasbach/ink-form) - Form.
|
|
2128
2176
|
- [ink-task-list](https://github.com/privatenumber/ink-task-list) - Task list.
|
|
2129
2177
|
- [ink-spawn](https://github.com/kraenhansen/ink-spawn) - Spawn child processes.
|
|
2178
|
+
- [ink-titled-box](https://github.com/mishieck/ink-titled-box) - Box with title.
|
|
2130
2179
|
|
|
2131
2180
|
## Useful Hooks
|
|
2132
2181
|
|
|
@@ -2141,8 +2190,8 @@ npm run example examples/[example name]
|
|
|
2141
2190
|
# e.g. npm run example examples/borders
|
|
2142
2191
|
```
|
|
2143
2192
|
|
|
2144
|
-
- [Jest](examples/jest/jest.tsx) - Implementation of basic Jest UI
|
|
2145
|
-
- [Counter](examples/counter/counter.tsx) - Simple counter that increments every 100ms
|
|
2193
|
+
- [Jest](examples/jest/jest.tsx) - Implementation of basic Jest UI.
|
|
2194
|
+
- [Counter](examples/counter/counter.tsx) - Simple counter that increments every 100ms.
|
|
2146
2195
|
- [Form with validation](https://github.com/final-form/rff-cli-example) - Manage form state using [Final Form](https://github.com/final-form/final-form#-final-form).
|
|
2147
2196
|
- [Borders](examples/borders/borders.tsx) - Add borders to `<Box>` component.
|
|
2148
2197
|
- [Suspense](examples/suspense/suspense.tsx) - Use React Suspense.
|