tinky 1.1.2 → 1.2.0

package/lib/components/Separator.d.ts

@@ -0,0 +1,82 @@
+import { type TextStyles } from "../utils/apply-text-styles.js";
+/**
+ * Props for the Separator component.
+ */
+export interface SeparatorProps extends TextStyles {
+    /**
+     * The character to repeat for the separator line.
+     *
+     * @defaultValue "─"
+     * @example
+     * ```tsx
+     * <Separator char="=" />
+     * ```
+     */
+    readonly char?: string;
+    /**
+     * The direction of the separator.
+     *
+     * - `"horizontal"`: The separator will expand horizontally to fill the container's width. Height will be 1 row.
+     * - `"vertical"`: The separator will expand vertically to fill the container's height. Width will be 1 column.
+     *
+     * @defaultValue "horizontal"
+     */
+    readonly direction?: "horizontal" | "vertical";
+}
+/**
+ * A component that renders a line of repeated characters to fill the available space.
+ *
+ * The `<Separator>` component is designed to be efficient and layout-friendly.
+ * Unlike manually repeating a character in a generic text string, this component
+ * uses the underlying layout engine (Taffy) to determine the exact number of
+ * characters needed to fill the container. This prevents overflow issues and
+ * avoids allocating unnecessarily large strings in memory.
+ *
+ * It supports both horizontal and vertical orientations and accepts all standard
+ * text styling properties (color, background, bold, etc.).
+ *
+ * @example
+ * **Basic Usage**
+ *
+ * Renders a horizontal line using the default character "─".
+ *
+ * ```tsx
+ * import { render, Box, Separator } from 'tinky';
+ *
+ * render(
+ *   <Box flexDirection="column" width={20}>
+ *     <Text>Title</Text>
+ *     <Separator />
+ *     <Text>Content</Text>
+ *   </Box>
+ * );
+ * ```
+ *
+ * @example
+ * **Vertical Separator**
+ *
+ * Renders a vertical line in a row layout.
+ *
+ * ```tsx
+ * <Box height={5}>
+ *   <Text>Left</Text>
+ *   <Separator direction="vertical" char="│" />
+ *   <Text>Right</Text>
+ * </Box>
+ * ```
+ *
+ * @example
+ * **Styling**
+ *
+ * You can apply colors and text modifiers just like with the `<Text>` component.
+ *
+ * ```tsx
+ * <Separator
+ *   char="="
+ *   color="blue"
+ *   bold
+ *   backgroundColor="white"
+ * />
+ * ```
+ */
+export declare function Separator({ char, direction, color, dimColor, backgroundColor, bold, italic, underline, strikethrough, inverse, }: SeparatorProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/Separator.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { applyTextStyles, } from "../utils/apply-text-styles.js";
+/**
+ * A component that renders a line of repeated characters to fill the available space.
+ *
+ * The `<Separator>` component is designed to be efficient and layout-friendly.
+ * Unlike manually repeating a character in a generic text string, this component
+ * uses the underlying layout engine (Taffy) to determine the exact number of
+ * characters needed to fill the container. This prevents overflow issues and
+ * avoids allocating unnecessarily large strings in memory.
+ *
+ * It supports both horizontal and vertical orientations and accepts all standard
+ * text styling properties (color, background, bold, etc.).
+ *
+ * @example
+ * **Basic Usage**
+ *
+ * Renders a horizontal line using the default character "─".
+ *
+ * ```tsx
+ * import { render, Box, Separator } from 'tinky';
+ *
+ * render(
+ *   <Box flexDirection="column" width={20}>
+ *     <Text>Title</Text>
+ *     <Separator />
+ *     <Text>Content</Text>
+ *   </Box>
+ * );
+ * ```
+ *
+ * @example
+ * **Vertical Separator**
+ *
+ * Renders a vertical line in a row layout.
+ *
+ * ```tsx
+ * <Box height={5}>
+ *   <Text>Left</Text>
+ *   <Separator direction="vertical" char="│" />
+ *   <Text>Right</Text>
+ * </Box>
+ * ```
+ *
+ * @example
+ * **Styling**
+ *
+ * You can apply colors and text modifiers just like with the `<Text>` component.
+ *
+ * ```tsx
+ * <Separator
+ *   char="="
+ *   color="blue"
+ *   bold
+ *   backgroundColor="white"
+ * />
+ * ```
+ */
+export function Separator({ char = "─", direction = "horizontal", color, dimColor = false, backgroundColor, bold = false, italic = false, underline = false, strikethrough = false, inverse = false, }) {
+    const style = direction === "horizontal"
+        ? { flexGrow: 1, flexShrink: 0, height: 1 }
+        : { flexGrow: 1, flexShrink: 0, width: 1 };
+    return (_jsx("tinky-separator", { style: style, internal_separatorChar: char, internal_separatorDirection: direction, internal_transform: (text) => {
+            return applyTextStyles(text, {
+                dimColor,
+                color,
+                backgroundColor,
+                bold,
+                italic,
+                underline,
+                strikethrough,
+                inverse,
+            });
+        } }));
+}

package/lib/components/Text.d.ts

@@ -1,11 +1,10 @@
 import { type ReactNode } from "react";
-import { type ForegroundColorName } from "chalk";
-import { type LiteralUnion } from "type-fest";
+import { type TextStyles } from "../utils/apply-text-styles.js";
 import { type Styles } from "../core/styles.js";
 /**
  * Props for the Text component.
  */
-export interface TextProps {
+export interface TextProps extends TextStyles {
     /**
      * A label for the element for screen readers.
      */
@@ -14,39 +13,6 @@ export interface TextProps {
      * Hide the element from screen readers.
      */
     readonly "aria-hidden"?: boolean;
-    /**
-     * Change text color. Tinky uses Chalk under the hood, so all its functionality
-     * is supported.
-     */
-    readonly color?: LiteralUnion<ForegroundColorName, string>;
-    /**
-     * Same as `color`, but for the background.
-     */
-    readonly backgroundColor?: LiteralUnion<ForegroundColorName, string>;
-    /**
-     * Dim the color (make it less bright).
-     */
-    readonly dimColor?: boolean;
-    /**
-     * Make the text bold.
-     */
-    readonly bold?: boolean;
-    /**
-     * Make the text italic.
-     */
-    readonly italic?: boolean;
-    /**
-     * Make the text underlined.
-     */
-    readonly underline?: boolean;
-    /**
-     * Make the text crossed out with a line.
-     */
-    readonly strikethrough?: boolean;
-    /**
-     * Inverse background and foreground colors.
-     */
-    readonly inverse?: boolean;
     /**
      * This property tells Tinky to wrap or truncate text if its width is larger
      * than the container. If `wrap` is passed (the default), Tinky will wrap text

package/lib/components/Text.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import chalk from "chalk";
-import { colorize } from "../utils/colorize.js";
+import { applyTextStyles, } from "../utils/apply-text-styles.js";
 import { AccessibilityContext } from "../contexts/AccessibilityContext.js";
 import { backgroundContext } from "../contexts/BackgroundContext.js";
 /**
@@ -34,33 +33,18 @@ export function Text({ color, backgroundColor, dimColor = false, bold = false, i
         return null;
     }
     const transform = (children) => {
-        if (dimColor) {
-            children = chalk.dim(children);
-        }
-        if (color) {
-            children = colorize(children, color, "foreground");
-        }
         // Use explicit backgroundColor if provided, otherwise use inherited from parent Box
         const effectiveBackgroundColor = backgroundColor ?? inheritedBackgroundColor;
-        if (effectiveBackgroundColor) {
-            children = colorize(children, effectiveBackgroundColor, "background");
-        }
-        if (bold) {
-            children = chalk.bold(children);
-        }
-        if (italic) {
-            children = chalk.italic(children);
-        }
-        if (underline) {
-            children = chalk.underline(children);
-        }
-        if (strikethrough) {
-            children = chalk.strikethrough(children);
-        }
-        if (inverse) {
-            children = chalk.inverse(children);
-        }
-        return children;
+        return applyTextStyles(children, {
+            color,
+            backgroundColor: effectiveBackgroundColor,
+            dimColor,
+            bold,
+            italic,
+            underline,
+            strikethrough,
+            inverse,
+        });
     };
     if (isScreenReaderEnabled && ariaHidden) {
         return null;

package/lib/core/dom.d.ts

@@ -21,7 +21,7 @@ export type TextName = "#text";
 /**
  * Type representing element names in the Tinky DOM.
  */
-export type ElementNames = "tinky-root" | "tinky-box" | "tinky-text" | "tinky-virtual-text";
+export type ElementNames = "tinky-root" | "tinky-box" | "tinky-text" | "tinky-virtual-text" | "tinky-separator";
 /**
  * Union type of all possible node names.
  */

package/lib/core/render-node-to-output.js

@@ -143,6 +143,24 @@ export const renderNodeToOutput = (node, output, options) => {
             }
             return;
         }
+        if (node.nodeName === "tinky-separator") {
+            const separatorChar = node.attributes["internal_separatorChar"] || "─";
+            const direction = node.attributes["internal_separatorDirection"] ||
+                "horizontal";
+            let separatorText;
+            if (direction === "horizontal") {
+                // Fill width with the separator character
+                const width = Math.max(0, Math.floor(layout.width));
+                separatorText = separatorChar.repeat(width);
+            }
+            else {
+                // Fill height with the separator character (one per line)
+                const height = Math.max(0, Math.floor(layout.height));
+                separatorText = (separatorChar + "\n").repeat(height).trimEnd();
+            }
+            output.write(x, y, separatorText, { transformers: newTransformers });
+            return;
+        }
         let clipped = false;
         if (node.nodeName === "tinky-box") {
             renderBackground(x, y, node, output);

package/lib/index.d.ts

@@ -9,6 +9,7 @@ export { StderrContext, type StderrProps } from "./contexts/StderrContext.js";
 export { Static, type StaticProps } from "./components/Static.js";
 export { Transform, type TransformProps } from "./components/Transform.js";
 export { Newline, type NewlineProps } from "./components/Newline.js";
+export { Separator, type SeparatorProps } from "./components/Separator.js";
 export { Spacer } from "./components/Spacer.js";
 export { useInput, type InputHandler, type InputOptions, type Key, } from "./hooks/use-input.js";
 export { useApp } from "./hooks/use-app.js";
@@ -20,6 +21,7 @@ export { useFocusManager, type FocusManager, } from "./hooks/use-focus-manager.j
 export { useIsScreenReaderEnabled } from "./hooks/use-is-screen-reader-enabled.js";
 export { measureElement } from "./utils/measure-element.js";
 export { type Dimension } from "./utils/dimension.js";
+export { applyTextStyles, type TextStyles } from "./utils/apply-text-styles.js";
 export { type DOMElement, type DOMNode, type DOMNodeAttribute, type ElementNames, type NodeNames, type TextName, type TextNode, type TinkyNode, } from "./core/dom.js";
 export { type Styles } from "./core/styles.js";
 export { type OutputTransformer } from "./core/render-node-to-output.js";

package/lib/index.js

@@ -8,6 +8,7 @@ export { StderrContext } from "./contexts/StderrContext.js";
 export { Static } from "./components/Static.js";
 export { Transform } from "./components/Transform.js";
 export { Newline } from "./components/Newline.js";
+export { Separator } from "./components/Separator.js";
 export { Spacer } from "./components/Spacer.js";
 export { useInput, } from "./hooks/use-input.js";
 export { useApp } from "./hooks/use-app.js";
@@ -18,3 +19,4 @@ export { useFocus, } from "./hooks/use-focus.js";
 export { useFocusManager, } from "./hooks/use-focus-manager.js";
 export { useIsScreenReaderEnabled } from "./hooks/use-is-screen-reader-enabled.js";
 export { measureElement } from "./utils/measure-element.js";
+export { applyTextStyles } from "./utils/apply-text-styles.js";

package/lib/utils/apply-text-styles.d.ts

@@ -0,0 +1,48 @@
+import { type ForegroundColorName } from "chalk";
+import { type LiteralUnion } from "type-fest";
+/**
+ * Common text styling props used by components like Text and Separator.
+ */
+export interface TextStyles {
+    /**
+     * Change text color. Tinky uses Chalk under the hood, so all its functionality
+     * is supported.
+     */
+    readonly color?: LiteralUnion<ForegroundColorName, string>;
+    /**
+     * Same as `color`, but for the background.
+     */
+    readonly backgroundColor?: LiteralUnion<ForegroundColorName, string>;
+    /**
+     * Dim the color (make it less bright).
+     */
+    readonly dimColor?: boolean;
+    /**
+     * Make the text bold.
+     */
+    readonly bold?: boolean;
+    /**
+     * Make the text italic.
+     */
+    readonly italic?: boolean;
+    /**
+     * Make the text underlined.
+     */
+    readonly underline?: boolean;
+    /**
+     * Make the text crossed out with a line.
+     */
+    readonly strikethrough?: boolean;
+    /**
+     * Inverse background and foreground colors.
+     */
+    readonly inverse?: boolean;
+}
+/**
+ * Applies text styles (color, bold, etc.) to a string using Chalk.
+ *
+ * @param text - The text to apply styles to.
+ * @param styles - The styles to apply.
+ * @returns The styled text.
+ */
+export declare const applyTextStyles: (text: string, styles: TextStyles) => string;

package/lib/utils/apply-text-styles.js

@@ -0,0 +1,36 @@
+import chalk from "chalk";
+import { colorize } from "./colorize.js";
+/**
+ * Applies text styles (color, bold, etc.) to a string using Chalk.
+ *
+ * @param text - The text to apply styles to.
+ * @param styles - The styles to apply.
+ * @returns The styled text.
+ */
+export const applyTextStyles = (text, styles) => {
+    if (styles.dimColor) {
+        text = chalk.dim(text);
+    }
+    if (styles.color) {
+        text = colorize(text, styles.color, "foreground");
+    }
+    if (styles.backgroundColor) {
+        text = colorize(text, styles.backgroundColor, "background");
+    }
+    if (styles.bold) {
+        text = chalk.bold(text);
+    }
+    if (styles.italic) {
+        text = chalk.italic(text);
+    }
+    if (styles.underline) {
+        text = chalk.underline(text);
+    }
+    if (styles.strikethrough) {
+        text = chalk.strikethrough(text);
+    }
+    if (styles.inverse) {
+        text = chalk.inverse(text);
+    }
+    return text;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinky",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "React for CLIs, re-imagined with the Taffy engine",
   "keywords": [
     "react",
@@ -51,7 +51,9 @@
     "indent-string": "^5.0.0",
     "mitt": "^3.0.1",
     "react-reconciler": "^0.33.0",
+    "slice-ansi": "^7.1.2",
     "stack-utils": "^2.0.6",
+    "string-width": "^8.1.0",
     "taffy-layout": "^0.1.0",
     "tslint": "^5.20.1",
     "type-fest": "^5.4.1",