@opentui/react 0.0.0-20250912-12c969f4 → 0.0.0-20250915-7be4d9eb

package/README.md

@@ -61,6 +61,10 @@ OpenTUI React provides several built-in components that map to OpenTUI core rend
 - **`<tab-select>`** - Tab-based selection
 - **`<ascii-font>`** - Display ASCII art text with different font styles
 
+Helpers:
+
+- **`<span>`, `<strong>`, `<em>`, `<u>`, `<b>`, `<i>`, `<br>`** - Text modifiers (_must be used inside of the text component_)
+
 ### Styling
 
 Components can be styled using props or the `style` prop:
@@ -191,8 +195,6 @@ function App() {
 Display text with rich formatting.
 
 ```tsx
-import { bold, fg, t } from "@opentui/core"
-
 function App() {
   return (
     <box>
@@ -200,10 +202,14 @@ function App() {
       <text>Hello World</text>
 
       {/* Rich text with children */}
-      <text>{bold(fg("red")("Bold Red Text"))}</text>
+      <text>
+        <span fg="red">Red Text</span>
+      </text>
 
-      {/* Template literals */}
-      <text>{t`${bold("Bold")} and ${fg("blue")("Blue")}`}</text>
+      {/* Text modifiers */}
+      <text>
+        <strong>Bold</strong>, <em>Italic</em>, and <u>Underlined</u>
+      </text>
     </box>
   )
 }
@@ -501,20 +507,31 @@ render(<App />)
 ### Styled Text Showcase
 
 ```tsx
-import { blue, bold, red, t, underline } from "@opentui/core"
 import { render } from "@opentui/react"
 
 function App() {
   return (
-    <box style={{ flexDirection: "column" }}>
+    <>
       <text>Simple text</text>
-      <text>{bold("Bold text")}</text>
-      <text>{underline("Underlined text")}</text>
-      <text>{red("Red text")}</text>
-      <text>{blue("Blue text")}</text>
-      <text>{bold(red("Bold red text"))}</text>
-      <text>{t`${bold("Bold")} and ${blue("blue")} combined`}</text>
-    </box>
+      <text>
+        <strong>Bold text</strong>
+      </text>
+      <text>
+        <u>Underlined text</u>
+      </text>
+      <text>
+        <span fg="red">Red text</span>
+      </text>
+      <text>
+        <span fg="blue">Blue text</span>
+      </text>
+      <text>
+        <strong fg="red">Bold red text</strong>
+      </text>
+      <text>
+        <strong>Bold</strong> and <span fg="blue">blue</span> combined
+      </text>
+    </>
   )
 }
 

package/index.js

@@ -12,7 +12,7 @@ import {
 
 // src/components/text.ts
 import { TextAttributes, TextNodeRenderable } from "@opentui/core";
-var textNodeKeys = ["span", "b", "strong", "i", "em", "u"];
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
 
 class SpanRenderable extends TextNodeRenderable {
   ctx;
@@ -36,23 +36,34 @@ class TextModifierRenderable extends SpanRenderable {
 }
 
 class BoldSpanRenderable extends TextModifierRenderable {
-  constructor(options) {
+  constructor(_ctx, options) {
     super(options, "b");
   }
 }
 
 class ItalicSpanRenderable extends TextModifierRenderable {
-  constructor(options) {
+  constructor(_ctx, options) {
     super(options, "i");
   }
 }
 
 class UnderlineSpanRenderable extends TextModifierRenderable {
-  constructor(options) {
+  constructor(_ctx, options) {
     super(options, "u");
   }
 }
 
+class LineBreakRenderable extends SpanRenderable {
+  constructor(_ctx, options) {
+    super(null, options);
+    this.add();
+  }
+  add() {
+    return super.add(`
+`);
+  }
+}
+
 // src/components/index.ts
 var baseComponents = {
   box: BoxRenderable,
@@ -63,6 +74,7 @@ var baseComponents = {
   "ascii-font": ASCIIFontRenderable,
   "tab-select": TabSelectRenderable,
   span: SpanRenderable,
+  br: LineBreakRenderable,
   b: BoldSpanRenderable,
   strong: BoldSpanRenderable,
   i: ItalicSpanRenderable,
@@ -326,7 +338,7 @@ var hostConfig = {
     return { isInsideText: false };
   },
   getChildHostContext(parentHostContext, type, rootContainerInstance) {
-    const isInsideText = ["text", "span", "b", "strong", "i", "em", "u"].includes(type);
+    const isInsideText = ["text", ...textNodeKeys].includes(type);
     return { ...parentHostContext, isInsideText };
   },
   shouldSetTextContent(type, props) {

package/jsx-namespace.d.ts

@@ -4,6 +4,7 @@ import type {
   BoxProps,
   ExtendedIntrinsicElements,
   InputProps,
+  LineBreakProps,
   OpenTUIComponents,
   ScrollBoxProps,
   SelectProps,
@@ -42,5 +43,6 @@ export namespace JSX {
     u: SpanProps
     strong: SpanProps
     em: SpanProps
+    br: LineBreakProps
   }
 }

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.0.0-20250912-12c969f4",
+  "version": "0.0.0-20250915-7be4d9eb",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.0.0-20250912-12c969f4",
+    "@opentui/core": "0.0.0-20250915-7be4d9eb",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {

package/src/components/index.d.ts

@@ -1,6 +1,6 @@
 import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
 import type { RenderableConstructor } from "../types/components";
-import { BoldSpanRenderable, ItalicSpanRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text";
+import { BoldSpanRenderable, ItalicSpanRenderable, LineBreakRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text";
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
@@ -10,6 +10,7 @@ export declare const baseComponents: {
     "ascii-font": typeof ASCIIFontRenderable;
     "tab-select": typeof TabSelectRenderable;
     span: typeof SpanRenderable;
+    br: typeof LineBreakRenderable;
     b: typeof BoldSpanRenderable;
     strong: typeof BoldSpanRenderable;
     i: typeof ItalicSpanRenderable;

package/src/components/text.d.ts

@@ -1,20 +1,24 @@
 import { TextNodeRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
-export declare const textNodeKeys: readonly ["span", "b", "strong", "i", "em", "u"];
+export declare const textNodeKeys: readonly ["span", "b", "strong", "i", "em", "u", "br"];
 export type TextNodeKey = (typeof textNodeKeys)[number];
 export declare class SpanRenderable extends TextNodeRenderable {
     private readonly ctx;
     constructor(ctx: RenderContext | null, options: TextNodeOptions);
 }
 declare class TextModifierRenderable extends SpanRenderable {
-    constructor(options: any, modifier?: TextNodeKey);
+    constructor(options: TextNodeOptions, modifier?: TextNodeKey);
 }
 export declare class BoldSpanRenderable extends TextModifierRenderable {
-    constructor(options: any);
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
 }
 export declare class ItalicSpanRenderable extends TextModifierRenderable {
-    constructor(options: any);
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
 }
 export declare class UnderlineSpanRenderable extends TextModifierRenderable {
-    constructor(options: any);
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+}
+export declare class LineBreakRenderable extends SpanRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+    add(): number;
 }
 export {};

package/src/reconciler/renderer.js

@@ -32,7 +32,7 @@ import {
 
 // src/components/text.ts
 import { TextAttributes, TextNodeRenderable } from "@opentui/core";
-var textNodeKeys = ["span", "b", "strong", "i", "em", "u"];
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
 
 class SpanRenderable extends TextNodeRenderable {
   ctx;
@@ -56,23 +56,34 @@ class TextModifierRenderable extends SpanRenderable {
 }
 
 class BoldSpanRenderable extends TextModifierRenderable {
-  constructor(options) {
+  constructor(_ctx, options) {
     super(options, "b");
   }
 }
 
 class ItalicSpanRenderable extends TextModifierRenderable {
-  constructor(options) {
+  constructor(_ctx, options) {
     super(options, "i");
   }
 }
 
 class UnderlineSpanRenderable extends TextModifierRenderable {
-  constructor(options) {
+  constructor(_ctx, options) {
     super(options, "u");
   }
 }
 
+class LineBreakRenderable extends SpanRenderable {
+  constructor(_ctx, options) {
+    super(null, options);
+    this.add();
+  }
+  add() {
+    return super.add(`
+`);
+  }
+}
+
 // src/components/index.ts
 var baseComponents = {
   box: BoxRenderable,
@@ -83,6 +94,7 @@ var baseComponents = {
   "ascii-font": ASCIIFontRenderable,
   "tab-select": TabSelectRenderable,
   span: SpanRenderable,
+  br: LineBreakRenderable,
   b: BoldSpanRenderable,
   strong: BoldSpanRenderable,
   i: ItalicSpanRenderable,
@@ -261,7 +273,7 @@ var hostConfig = {
     return { isInsideText: false };
   },
   getChildHostContext(parentHostContext, type, rootContainerInstance) {
-    const isInsideText = ["text", "span", "b", "strong", "i", "em", "u"].includes(type);
+    const isInsideText = ["text", ...textNodeKeys].includes(type);
     return { ...parentHostContext, isInsideText };
   },
   shouldSetTextContent(type, props) {

package/src/types/components.d.ts

@@ -31,6 +31,7 @@ export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
 export type SpanProps = ComponentProps<TextNodeOptions, TextNodeRenderable> & {
     children?: TextChildren;
 };
+export type LineBreakProps = Pick<SpanProps, "id">;
 export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable>;
 export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
     focused?: boolean;