@opentui/react 0.1.22 → 0.1.24

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

@@ -9,6 +9,62 @@ import {
   TabSelectRenderable,
   TextRenderable
 } from "@opentui/core";
+
+// src/components/text.ts
+import { TextAttributes, TextNodeRenderable } from "@opentui/core";
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
+
+class SpanRenderable extends TextNodeRenderable {
+  ctx;
+  constructor(ctx, options) {
+    super(options);
+    this.ctx = ctx;
+  }
+}
+
+class TextModifierRenderable extends SpanRenderable {
+  constructor(options, modifier) {
+    super(null, options);
+    if (modifier === "b" || modifier === "strong") {
+      this.attributes = (this.attributes || 0) | TextAttributes.BOLD;
+    } else if (modifier === "i" || modifier === "em") {
+      this.attributes = (this.attributes || 0) | TextAttributes.ITALIC;
+    } else if (modifier === "u") {
+      this.attributes = (this.attributes || 0) | TextAttributes.UNDERLINE;
+    }
+  }
+}
+
+class BoldSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "b");
+  }
+}
+
+class ItalicSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "i");
+  }
+}
+
+class UnderlineSpanRenderable extends TextModifierRenderable {
+  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,
   text: TextRenderable,
@@ -16,7 +72,14 @@ var baseComponents = {
   select: SelectRenderable,
   scrollbox: ScrollBoxRenderable,
   "ascii-font": ASCIIFontRenderable,
-  "tab-select": TabSelectRenderable
+  "tab-select": TabSelectRenderable,
+  span: SpanRenderable,
+  br: LineBreakRenderable,
+  b: BoldSpanRenderable,
+  strong: BoldSpanRenderable,
+  i: ItalicSpanRenderable,
+  em: ItalicSpanRenderable,
+  u: UnderlineSpanRenderable
 };
 var componentCatalogue = { ...baseComponents };
 function extend(objects) {
@@ -104,6 +167,7 @@ import ReactReconciler from "react-reconciler";
 import { ConcurrentRoot } from "react-reconciler/constants";
 
 // src/reconciler/host-config.ts
+import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
 import { createContext as createContext2 } from "react";
 import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
 
@@ -122,13 +186,11 @@ function getNextId(type) {
 import {
   InputRenderable as InputRenderable2,
   InputRenderableEvents,
+  isRenderable,
   SelectRenderable as SelectRenderable2,
   SelectRenderableEvents,
-  StyledText,
   TabSelectRenderable as TabSelectRenderable2,
-  TabSelectRenderableEvents,
-  TextRenderable as TextRenderable2,
-  stringToStyledText
+  TabSelectRenderableEvents
 } from "@opentui/core";
 function initEventListeners(instance, eventName, listener, previousListener) {
   if (previousListener) {
@@ -138,44 +200,6 @@ function initEventListeners(instance, eventName, listener, previousListener) {
     instance.on(eventName, listener);
   }
 }
-function handleTextChildren(textInstance, children) {
-  if (children == null) {
-    textInstance.content = stringToStyledText("");
-    return;
-  }
-  if (Array.isArray(children)) {
-    const chunks = [];
-    for (const child of children) {
-      if (typeof child === "string") {
-        chunks.push({
-          __isChunk: true,
-          text: child
-        });
-      } else if (child && typeof child === "object" && "__isChunk" in child) {
-        chunks.push(child);
-      } else if (child instanceof StyledText) {
-        chunks.push(...child.chunks);
-      } else if (child != null) {
-        const stringValue = String(child);
-        chunks.push({
-          __isChunk: true,
-          text: stringValue
-        });
-      }
-    }
-    textInstance.content = new StyledText(chunks);
-    return;
-  }
-  if (typeof children === "string") {
-    textInstance.content = stringToStyledText(children);
-  } else if (children && typeof children === "object" && "__isChunk" in children) {
-    textInstance.content = new StyledText([children]);
-  } else if (children instanceof StyledText) {
-    textInstance.content = children;
-  } else {
-    textInstance.content = stringToStyledText(String(children));
-  }
-}
 function setStyle(instance, styles, oldStyles) {
   if (styles && typeof styles === "object") {
     if (oldStyles != null) {
@@ -224,19 +248,18 @@ function setProperty(instance, type, propKey, propValue, oldPropValue) {
       }
       break;
     case "focused":
-      if (!!propValue) {
-        instance.focus();
-      } else {
-        instance.blur();
+      if (isRenderable(instance)) {
+        if (!!propValue) {
+          instance.focus();
+        } else {
+          instance.blur();
+        }
       }
       break;
     case "style":
       setStyle(instance, propValue, oldPropValue);
       break;
     case "children":
-      if (type === "text" && instance instanceof TextRenderable2) {
-        handleTextChildren(instance, propValue);
-      }
       break;
     default:
       instance[propKey] = propValue;
@@ -277,10 +300,13 @@ var hostConfig = {
   supportsPersistence: false,
   supportsHydration: false,
   createInstance(type, props, rootContainerInstance, hostContext) {
+    if (textNodeKeys.includes(type) && !hostContext.isInsideText) {
+      throw new Error(`Component of type "${type}" must be created inside of a text node`);
+    }
     const id = getNextId(type);
     const components = getComponentCatalogue();
     if (!components[type]) {
-      throw new Error(`[Reconciler] Unknown component type: ${type}`);
+      throw new Error(`Unknown component type: ${type}`);
     }
     return new components[type](rootContainerInstance.ctx, {
       id,
@@ -309,23 +335,20 @@ var hostConfig = {
     containerInfo.requestRender();
   },
   getRootHostContext(rootContainerInstance) {
-    return {};
+    return { isInsideText: false };
   },
   getChildHostContext(parentHostContext, type, rootContainerInstance) {
-    return parentHostContext;
+    const isInsideText = ["text", ...textNodeKeys].includes(type);
+    return { ...parentHostContext, isInsideText };
   },
   shouldSetTextContent(type, props) {
-    if (type === "text") {
-      return true;
-    }
     return false;
   },
   createTextInstance(text, rootContainerInstance, hostContext) {
-    const components = getComponentCatalogue();
-    return new components["text"](rootContainerInstance.ctx, {
-      id: getNextId("text"),
-      content: text
-    });
+    if (!hostContext.isInsideText) {
+      throw new Error("Text must be created inside of a text node");
+    }
+    return TextNodeRenderable2.fromString(text);
   },
   scheduleTimeout: setTimeout,
   cancelTimeout: clearTimeout,
@@ -343,7 +366,7 @@ var hostConfig = {
     instance.requestRender();
   },
   commitTextUpdate(textInstance, oldText, newText) {
-    textInstance.content = newText;
+    textInstance.children = [newText];
     textInstance.requestRender();
   },
   appendChildToContainer(container, child) {
@@ -406,7 +429,7 @@ var hostConfig = {
   },
   detachDeletedInstance(instance) {
     if (!instance.parent) {
-      instance.destroy();
+      instance.destroyRecursively();
     }
   },
   getPublicInstance(instance) {

package/jsx-namespace.d.ts

@@ -4,9 +4,11 @@ import type {
   BoxProps,
   ExtendedIntrinsicElements,
   InputProps,
+  LineBreakProps,
   OpenTUIComponents,
   ScrollBoxProps,
   SelectProps,
+  SpanProps,
   TabSelectProps,
   TextProps,
 } from "./src/types/components"
@@ -29,10 +31,18 @@ export namespace JSX {
   interface IntrinsicElements extends React.JSX.IntrinsicElements, ExtendedIntrinsicElements<OpenTUIComponents> {
     box: BoxProps
     text: TextProps
+    span: SpanProps
     input: InputProps
     select: SelectProps
     scrollbox: ScrollBoxProps
     "ascii-font": AsciiFontProps
     "tab-select": TabSelectProps
+    // Text modifiers
+    b: SpanProps
+    i: SpanProps
+    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.1.22",
+  "version": "0.1.24",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -35,15 +35,15 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.1.22",
+    "@opentui/core": "0.1.24",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "@types/react-reconciler": "^0.32.0"
+    "@types/react-reconciler": "^0.32.0",
+    "typescript": "^5"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "typescript": "^5"
+    "react": ">=19.0.0"
   }
 }

package/src/components/index.d.ts

@@ -1,5 +1,6 @@
 import { ASCIIFontRenderable, BoxRenderable, InputRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
 import type { RenderableConstructor } from "../types/components";
+import { BoldSpanRenderable, ItalicSpanRenderable, LineBreakRenderable, SpanRenderable, UnderlineSpanRenderable } from "./text";
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
@@ -8,6 +9,13 @@ export declare const baseComponents: {
     scrollbox: typeof ScrollBoxRenderable;
     "ascii-font": typeof ASCIIFontRenderable;
     "tab-select": typeof TabSelectRenderable;
+    span: typeof SpanRenderable;
+    br: typeof LineBreakRenderable;
+    b: typeof BoldSpanRenderable;
+    strong: typeof BoldSpanRenderable;
+    i: typeof ItalicSpanRenderable;
+    em: typeof ItalicSpanRenderable;
+    u: typeof UnderlineSpanRenderable;
 };
 type ComponentCatalogue = Record<string, RenderableConstructor>;
 export declare const componentCatalogue: ComponentCatalogue;

package/src/components/text.d.ts

@@ -0,0 +1,24 @@
+import { TextNodeRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
+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: TextNodeOptions, modifier?: TextNodeKey);
+}
+export declare class BoldSpanRenderable extends TextModifierRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+}
+export declare class ItalicSpanRenderable extends TextModifierRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+}
+export declare class UnderlineSpanRenderable extends TextModifierRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+}
+export declare class LineBreakRenderable extends SpanRenderable {
+    constructor(_ctx: RenderContext | null, options: TextNodeOptions);
+    add(): number;
+}
+export {};

package/src/reconciler/reconciler.d.ts

@@ -1,5 +1,5 @@
 import type { RootRenderable } from "@opentui/core";
 import React from "react";
 import ReactReconciler from "react-reconciler";
-export declare const reconciler: ReactReconciler.Reconciler<RootRenderable, import("@opentui/core").Renderable, import("@opentui/core").TextRenderable, unknown, unknown, import("@opentui/core").Renderable>;
+export declare const reconciler: ReactReconciler.Reconciler<RootRenderable, import("@opentui/core").BaseRenderable, import("@opentui/core").TextNodeRenderable, unknown, unknown, import("@opentui/core").BaseRenderable>;
 export declare function _render(element: React.ReactNode, root: RootRenderable): void;

package/src/reconciler/renderer.js

@@ -15,6 +15,7 @@ import ReactReconciler from "react-reconciler";
 import { ConcurrentRoot } from "react-reconciler/constants";
 
 // src/reconciler/host-config.ts
+import { TextNodeRenderable as TextNodeRenderable2 } from "@opentui/core";
 import { createContext as createContext2 } from "react";
 import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
 
@@ -28,6 +29,62 @@ import {
   TabSelectRenderable,
   TextRenderable
 } from "@opentui/core";
+
+// src/components/text.ts
+import { TextAttributes, TextNodeRenderable } from "@opentui/core";
+var textNodeKeys = ["span", "b", "strong", "i", "em", "u", "br"];
+
+class SpanRenderable extends TextNodeRenderable {
+  ctx;
+  constructor(ctx, options) {
+    super(options);
+    this.ctx = ctx;
+  }
+}
+
+class TextModifierRenderable extends SpanRenderable {
+  constructor(options, modifier) {
+    super(null, options);
+    if (modifier === "b" || modifier === "strong") {
+      this.attributes = (this.attributes || 0) | TextAttributes.BOLD;
+    } else if (modifier === "i" || modifier === "em") {
+      this.attributes = (this.attributes || 0) | TextAttributes.ITALIC;
+    } else if (modifier === "u") {
+      this.attributes = (this.attributes || 0) | TextAttributes.UNDERLINE;
+    }
+  }
+}
+
+class BoldSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "b");
+  }
+}
+
+class ItalicSpanRenderable extends TextModifierRenderable {
+  constructor(_ctx, options) {
+    super(options, "i");
+  }
+}
+
+class UnderlineSpanRenderable extends TextModifierRenderable {
+  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,
   text: TextRenderable,
@@ -35,7 +92,14 @@ var baseComponents = {
   select: SelectRenderable,
   scrollbox: ScrollBoxRenderable,
   "ascii-font": ASCIIFontRenderable,
-  "tab-select": TabSelectRenderable
+  "tab-select": TabSelectRenderable,
+  span: SpanRenderable,
+  br: LineBreakRenderable,
+  b: BoldSpanRenderable,
+  strong: BoldSpanRenderable,
+  i: ItalicSpanRenderable,
+  em: ItalicSpanRenderable,
+  u: UnderlineSpanRenderable
 };
 var componentCatalogue = { ...baseComponents };
 function getComponentCatalogue() {
@@ -57,13 +121,11 @@ function getNextId(type) {
 import {
   InputRenderable as InputRenderable2,
   InputRenderableEvents,
+  isRenderable,
   SelectRenderable as SelectRenderable2,
   SelectRenderableEvents,
-  StyledText,
   TabSelectRenderable as TabSelectRenderable2,
-  TabSelectRenderableEvents,
-  TextRenderable as TextRenderable2,
-  stringToStyledText
+  TabSelectRenderableEvents
 } from "@opentui/core";
 function initEventListeners(instance, eventName, listener, previousListener) {
   if (previousListener) {
@@ -73,44 +135,6 @@ function initEventListeners(instance, eventName, listener, previousListener) {
     instance.on(eventName, listener);
   }
 }
-function handleTextChildren(textInstance, children) {
-  if (children == null) {
-    textInstance.content = stringToStyledText("");
-    return;
-  }
-  if (Array.isArray(children)) {
-    const chunks = [];
-    for (const child of children) {
-      if (typeof child === "string") {
-        chunks.push({
-          __isChunk: true,
-          text: child
-        });
-      } else if (child && typeof child === "object" && "__isChunk" in child) {
-        chunks.push(child);
-      } else if (child instanceof StyledText) {
-        chunks.push(...child.chunks);
-      } else if (child != null) {
-        const stringValue = String(child);
-        chunks.push({
-          __isChunk: true,
-          text: stringValue
-        });
-      }
-    }
-    textInstance.content = new StyledText(chunks);
-    return;
-  }
-  if (typeof children === "string") {
-    textInstance.content = stringToStyledText(children);
-  } else if (children && typeof children === "object" && "__isChunk" in children) {
-    textInstance.content = new StyledText([children]);
-  } else if (children instanceof StyledText) {
-    textInstance.content = children;
-  } else {
-    textInstance.content = stringToStyledText(String(children));
-  }
-}
 function setStyle(instance, styles, oldStyles) {
   if (styles && typeof styles === "object") {
     if (oldStyles != null) {
@@ -159,19 +183,18 @@ function setProperty(instance, type, propKey, propValue, oldPropValue) {
       }
       break;
     case "focused":
-      if (!!propValue) {
-        instance.focus();
-      } else {
-        instance.blur();
+      if (isRenderable(instance)) {
+        if (!!propValue) {
+          instance.focus();
+        } else {
+          instance.blur();
+        }
       }
       break;
     case "style":
       setStyle(instance, propValue, oldPropValue);
       break;
     case "children":
-      if (type === "text" && instance instanceof TextRenderable2) {
-        handleTextChildren(instance, propValue);
-      }
       break;
     default:
       instance[propKey] = propValue;
@@ -212,10 +235,13 @@ var hostConfig = {
   supportsPersistence: false,
   supportsHydration: false,
   createInstance(type, props, rootContainerInstance, hostContext) {
+    if (textNodeKeys.includes(type) && !hostContext.isInsideText) {
+      throw new Error(`Component of type "${type}" must be created inside of a text node`);
+    }
     const id = getNextId(type);
     const components = getComponentCatalogue();
     if (!components[type]) {
-      throw new Error(`[Reconciler] Unknown component type: ${type}`);
+      throw new Error(`Unknown component type: ${type}`);
     }
     return new components[type](rootContainerInstance.ctx, {
       id,
@@ -244,23 +270,20 @@ var hostConfig = {
     containerInfo.requestRender();
   },
   getRootHostContext(rootContainerInstance) {
-    return {};
+    return { isInsideText: false };
   },
   getChildHostContext(parentHostContext, type, rootContainerInstance) {
-    return parentHostContext;
+    const isInsideText = ["text", ...textNodeKeys].includes(type);
+    return { ...parentHostContext, isInsideText };
   },
   shouldSetTextContent(type, props) {
-    if (type === "text") {
-      return true;
-    }
     return false;
   },
   createTextInstance(text, rootContainerInstance, hostContext) {
-    const components = getComponentCatalogue();
-    return new components["text"](rootContainerInstance.ctx, {
-      id: getNextId("text"),
-      content: text
-    });
+    if (!hostContext.isInsideText) {
+      throw new Error("Text must be created inside of a text node");
+    }
+    return TextNodeRenderable2.fromString(text);
   },
   scheduleTimeout: setTimeout,
   cancelTimeout: clearTimeout,
@@ -278,7 +301,7 @@ var hostConfig = {
     instance.requestRender();
   },
   commitTextUpdate(textInstance, oldText, newText) {
-    textInstance.content = newText;
+    textInstance.children = [newText];
     textInstance.requestRender();
   },
   appendChildToContainer(container, child) {
@@ -341,7 +364,7 @@ var hostConfig = {
   },
   detachDeletedInstance(instance) {
     if (!instance.parent) {
-      instance.destroy();
+      instance.destroyRecursively();
     }
   },
   getPublicInstance(instance) {

package/src/types/components.d.ts

@@ -1,4 +1,4 @@
-import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextChunk, TextOptions, TextRenderable } from "@opentui/core";
+import type { ASCIIFontOptions, ASCIIFontRenderable, BaseRenderable, BoxOptions, BoxRenderable, InputRenderable, InputRenderableOptions, RenderableOptions, RenderContext, ScrollBoxOptions, ScrollBoxRenderable, SelectOption, SelectRenderable, SelectRenderableOptions, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextNodeOptions, TextNodeRenderable, TextOptions, TextRenderable } from "@opentui/core";
 import type React from "react";
 /** Properties that should not be included in the style prop */
 export type NonStyledProps = "id" | "buffered" | "live" | "enableLayout" | "selectable" | "renderAfter" | "renderBefore" | `on${string}`;
@@ -8,7 +8,7 @@ export type ReactProps<TRenderable = unknown> = {
     ref?: React.Ref<TRenderable>;
 };
 /** Base type for any renderable constructor */
-export type RenderableConstructor<TRenderable extends Renderable = Renderable> = new (ctx: RenderContext, options: any) => TRenderable;
+export type RenderableConstructor<TRenderable extends BaseRenderable = BaseRenderable> = new (ctx: RenderContext, options: any) => TRenderable;
 /** Extract the options type from a renderable constructor */
 type ExtractRenderableOptions<TConstructor> = TConstructor extends new (ctx: RenderContext, options: infer TOptions) => any ? TOptions : never;
 /** Extract the renderable type from a constructor */
@@ -20,14 +20,18 @@ type ContainerProps<TOptions> = TOptions & {
     children?: React.ReactNode;
 };
 /** Smart component props that automatically determine excluded properties */
-type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends Renderable> = TOptions & {
+type ComponentProps<TOptions extends RenderableOptions<TRenderable>, TRenderable extends BaseRenderable> = TOptions & {
     style?: Partial<Omit<TOptions, GetNonStyledProperties<RenderableConstructor<TRenderable>>>>;
 } & ReactProps<TRenderable>;
 /** Valid text content types for Text component children */
-type TextChildren = string | number | boolean | null | undefined;
+type TextChildren = string | number | boolean | null | undefined | React.ReactNode;
 export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
-    children?: TextChildren | StyledText | TextChunk | Array<TextChildren | StyledText | TextChunk>;
+    children?: TextChildren;
 };
+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;

package/src/types/host.d.ts

@@ -1,9 +1,11 @@
-import type { Renderable, RootRenderable, TextRenderable } from "@opentui/core";
+import type { BaseRenderable, RootRenderable, TextNodeRenderable } from "@opentui/core";
 import { baseComponents } from "../components";
 export type Type = keyof typeof baseComponents;
 export type Props = Record<string, any>;
 export type Container = RootRenderable;
-export type Instance = Renderable;
-export type TextInstance = TextRenderable;
+export type Instance = BaseRenderable;
+export type TextInstance = TextNodeRenderable;
 export type PublicInstance = Instance;
-export type HostContext = Record<string, any>;
+export type HostContext = Record<string, any> & {
+    isInsideText?: boolean;
+};