@opentui/react 0.1.7 → 0.1.9

package/README.md

@@ -39,6 +39,7 @@ OpenTUI React provides several built-in components that map to OpenTUI core rend
 - **`<input>`** - Text input field
 - **`<select>`** - Selection dropdown
 - **`<tab-select>`** - Tab-based selection
+- **`<ascii-font>`** - Display ASCII art text with different font styles
 
 ### Styling
 
@@ -135,6 +136,29 @@ function MyComponent() {
 }
 ```
 
+#### `useTerminalDimensions()`
+
+Get current terminal dimensions and automatically update when the terminal is resized.
+
+```tsx
+import { useTerminalDimensions } from "@opentui/react"
+
+function MyComponent() {
+  const { width, height } = useTerminalDimensions()
+
+  return (
+    <group>
+      <text>Terminal dimensions: {width}x{height}</text>
+      <box style={{ width: Math.floor(width / 2), height: Math.floor(height / 3) }}>
+        <text>Half-width, third-height box</text>
+      </box>
+    </group>
+  )
+}
+```
+
+**Returns:** An object with `width` and `height` properties representing the current terminal dimensions.
+
 ## Components
 
 ### Text Component
@@ -274,6 +298,67 @@ function SelectExample() {
 }
 ```
 
+### ASCII Font Component
+
+Display ASCII art text with different font styles.
+
+```tsx
+import { measureText } from "@opentui/core"
+import { useState } from "react"
+
+function ASCIIFontExample() {
+  const text = "ASCII"
+  const [font, setFont] = useState<"block" | "shade" | "slick" | "tiny">("tiny")
+
+  const { width, height } = measureText({
+    text,
+    font,
+  })
+
+  return (
+    <group style={{ paddingLeft: 1, paddingRight: 1 }}>
+      <box
+        style={{
+          height: 8,
+          marginBottom: 1,
+        }}
+      >
+        <select
+          focused
+          onChange={(_, option) => setFont(option?.value)}
+          showScrollIndicator
+          options={[
+            {
+              name: "Tiny",
+              description: "Tiny font",
+              value: "tiny",
+            },
+            {
+              name: "Block",
+              description: "Block font",
+              value: "block",
+            },
+            {
+              name: "Slick",
+              description: "Slick font",
+              value: "slick",
+            },
+            {
+              name: "Shade",
+              description: "Shade font",
+              value: "shade",
+            },
+          ]}
+          style={{ flexGrow: 1 }}
+        />
+      </box>
+
+      <ascii-font style={{ width, height }} text={text} font={font} />
+    </group>
+  )
+}
+```
+
 ## Examples
 
 ### Login Form

package/index.js

@@ -1,6 +1,7 @@
 // @bun
 // src/components/index.ts
 import {
+  ASCIIFontRenderable,
   BoxRenderable,
   GroupRenderable,
   InputRenderable,
@@ -14,6 +15,7 @@ var baseComponents = {
   group: GroupRenderable,
   input: InputRenderable,
   select: SelectRenderable,
+  "ascii-font": ASCIIFontRenderable,
   "tab-select": TabSelectRenderable
 };
 var componentCatalogue = { ...baseComponents };
@@ -63,6 +65,20 @@ var useOnResize = (callback) => {
   }, [renderer, callback]);
   return renderer;
 };
+// src/hooks/use-terminal-dimensions.tsx
+import { useState } from "react";
+var useTerminalDimensions = () => {
+  const renderer = useRenderer();
+  const [dimensions, setDimensions] = useState({
+    width: renderer.terminalWidth,
+    height: renderer.terminalHeight
+  });
+  const cb = (width, height) => {
+    setDimensions({ width, height });
+  };
+  useOnResize(cb);
+  return dimensions;
+};
 // src/reconciler/renderer.ts
 import { createCliRenderer, getKeyHandler } from "@opentui/core";
 import React from "react";
@@ -405,6 +421,7 @@ async function render(node, rendererConfig = {}) {
   _render(React.createElement(AppContext.Provider, { value: { keyHandler, renderer } }, node), renderer.root);
 }
 export {
+  useTerminalDimensions,
   useRenderer,
   useOnResize,
   useKeyboard,

package/jsx-namespace.d.ts

@@ -1,25 +1,37 @@
-import type { BoxProps, GroupProps, InputProps, SelectProps, TabSelectProps, TextProps } from "./src/types/components"
-import type { ExtendedIntrinsicElements, OpenTUIComponents } from "./src/types/extend"
+import type * as React from "react"
+import type {
+  AsciiFontProps,
+  BoxProps,
+  GroupProps,
+  InputProps,
+  SelectProps,
+  TabSelectProps,
+  TextProps,
+} from "./src/types/components"
+import type { ExtendedIntrinsicElements, OpenTUIComponents } from "./src/types/components"
 
 export namespace JSX {
-  interface Element extends React.ReactElement<any, any> {}
+  type Element = React.ReactNode
 
-  interface ElementClass {
-    render: any
+  interface ElementClass extends React.ComponentClass<any> {
+    render(): React.ReactNode
   }
+
   interface ElementAttributesProperty {
     props: {}
   }
+
   interface ElementChildrenAttribute {
     children: {}
   }
 
-  interface IntrinsicElements extends ExtendedIntrinsicElements<OpenTUIComponents> {
+  interface IntrinsicElements extends React.JSX.IntrinsicElements, ExtendedIntrinsicElements<OpenTUIComponents> {
     box: BoxProps
+    text: TextProps
     group: GroupProps
     input: InputProps
     select: SelectProps
+    "ascii-font": AsciiFontProps
     "tab-select": TabSelectProps
-    text: TextProps
   }
 }

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -35,13 +35,12 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.1.7",
+    "@opentui/core": "0.1.9",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "@types/react-reconciler": "^0.32.0",
-    "prettier": "3.6.2"
+    "@types/react-reconciler": "^0.32.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/components/index.d.ts

@@ -1,11 +1,12 @@
-import { BoxRenderable, GroupRenderable, InputRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
-import type { RenderableConstructor } from "../types/extend";
+import { ASCIIFontRenderable, BoxRenderable, GroupRenderable, InputRenderable, SelectRenderable, TabSelectRenderable, TextRenderable } from "@opentui/core";
+import type { RenderableConstructor } from "../types/components";
 export declare const baseComponents: {
     box: typeof BoxRenderable;
     text: typeof TextRenderable;
     group: typeof GroupRenderable;
     input: typeof InputRenderable;
     select: typeof SelectRenderable;
+    "ascii-font": typeof ASCIIFontRenderable;
     "tab-select": typeof TabSelectRenderable;
 };
 type ComponentCatalogue = Record<string, RenderableConstructor>;
@@ -24,4 +25,4 @@ export declare const componentCatalogue: ComponentCatalogue;
  */
 export declare function extend<T extends ComponentCatalogue>(objects: T): void;
 export declare function getComponentCatalogue(): ComponentCatalogue;
-export type { ExtendedComponentProps, ExtendedIntrinsicElements, RenderableConstructor } from "../types/extend";
+export type { ExtendedComponentProps, ExtendedIntrinsicElements, RenderableConstructor } from "../types/components";

package/src/hooks/use-terminal-dimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useTerminalDimensions: () => {
+    width: number;
+    height: number;
+};

package/src/index.d.ts

@@ -3,6 +3,6 @@ export * from "./components/app";
 export * from "./hooks/use-keyboard";
 export * from "./hooks/use-renderer";
 export * from "./hooks/use-resize";
+export * from "./hooks/use-terminal-dimensions";
 export * from "./reconciler/renderer";
-export * from "./types/extend";
 export * from "./types/components";

package/src/reconciler/renderer.js

@@ -20,6 +20,7 @@ import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constant
 
 // src/components/index.ts
 import {
+  ASCIIFontRenderable,
   BoxRenderable,
   GroupRenderable,
   InputRenderable,
@@ -33,6 +34,7 @@ var baseComponents = {
   group: GroupRenderable,
   input: InputRenderable,
   select: SelectRenderable,
+  "ascii-font": ASCIIFontRenderable,
   "tab-select": TabSelectRenderable
 };
 var componentCatalogue = { ...baseComponents };

package/src/types/components.d.ts

@@ -1,32 +1,66 @@
-import type { BoxOptions, InputRenderableOptions, RenderableOptions, SelectOption, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderableOptions, TextChunk, TextOptions } from "@opentui/core";
+import type { ASCIIFontOptions, ASCIIFontRenderable, BoxOptions, BoxRenderable, GroupRenderable, InputRenderable, InputRenderableOptions, Renderable, RenderableOptions, SelectOption, SelectRenderable, SelectRenderableOptions, StyledText, TabSelectOption, TabSelectRenderable, TabSelectRenderableOptions, TextChunk, TextOptions, TextRenderable } from "@opentui/core";
 import type React from "react";
-type NonStyledProps = "buffered";
-type ContainerProps<T> = T & {
-    children?: React.ReactNode;
+/** Properties that should not be included in the style prop */
+export type NonStyledProps = "buffered" | "live" | "enableLayout" | "selectable";
+/** React-specific props for all components */
+export type ReactProps<TRenderable = unknown> = {
+    key?: React.Key;
+    ref?: React.Ref<TRenderable>;
 };
-type ComponentProps<T extends RenderableOptions, K extends keyof T = NonStyledProps> = T & {
-    style?: Partial<Omit<T, K | NonStyledProps>>;
+/** Base type for any renderable constructor */
+export type RenderableConstructor<TRenderable extends Renderable = Renderable> = new (id: string, options: any) => TRenderable;
+/** Extract the options type from a renderable constructor */
+type ExtractRenderableOptions<TConstructor> = TConstructor extends new (id: string, options: infer TOptions) => any ? TOptions : never;
+/** Extract the renderable type from a constructor */
+type ExtractRenderable<TConstructor> = TConstructor extends new (id: string, options: any) => infer TRenderable ? TRenderable : never;
+/** Determine which properties should be excluded from styling for different renderable types */
+export type GetNonStyledProperties<TConstructor> = TConstructor extends RenderableConstructor<TextRenderable> ? NonStyledProps | "content" : TConstructor extends RenderableConstructor<BoxRenderable> ? NonStyledProps | "title" : TConstructor extends RenderableConstructor<ASCIIFontRenderable> ? NonStyledProps | "text" | "selectable" : NonStyledProps;
+/** Base props for container components that accept children */
+type ContainerProps<TOptions> = TOptions & {
+    children?: React.ReactNode;
 };
-type TextChildren = (string & {}) | number | boolean | null | undefined;
-export type TextProps = ComponentProps<TextOptions, "content"> & {
+/** Smart component props that automatically determine excluded properties */
+type ComponentProps<TOptions extends RenderableOptions, TRenderable extends Renderable> = 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;
+export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
     children?: TextChildren | StyledText | TextChunk | Array<TextChildren | StyledText | TextChunk>;
 };
-export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, "title">;
-export type GroupProps = ComponentProps<ContainerProps<RenderableOptions>>;
-export type InputProps = ComponentProps<InputRenderableOptions> & {
+export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable>;
+export type GroupProps = ComponentProps<ContainerProps<RenderableOptions>, GroupRenderable>;
+export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
     focused?: boolean;
     onInput?: (value: string) => void;
     onChange?: (value: string) => void;
     onSubmit?: (value: string) => void;
 };
-export type SelectProps = ComponentProps<SelectRenderableOptions> & {
+export type SelectProps = ComponentProps<SelectRenderableOptions, SelectRenderable> & {
     focused?: boolean;
     onChange?: (index: number, option: SelectOption | null) => void;
     onSelect?: (index: number, option: SelectOption | null) => void;
 };
-export type TabSelectProps = ComponentProps<TabSelectRenderableOptions> & {
+export type AsciiFontProps = ComponentProps<ASCIIFontOptions, ASCIIFontRenderable>;
+export type TabSelectProps = ComponentProps<TabSelectRenderableOptions, TabSelectRenderable> & {
     focused?: boolean;
     onChange?: (index: number, option: TabSelectOption | null) => void;
     onSelect?: (index: number, option: TabSelectOption | null) => void;
 };
+/** Convert renderable constructor to component props with proper style exclusions */
+export type ExtendedComponentProps<TConstructor extends RenderableConstructor, TOptions = ExtractRenderableOptions<TConstructor>> = TOptions & {
+    children?: React.ReactNode;
+    style?: Partial<Omit<TOptions, GetNonStyledProperties<TConstructor>>>;
+} & ReactProps<ExtractRenderable<TConstructor>>;
+/** Helper type to create JSX element properties from a component catalogue */
+export type ExtendedIntrinsicElements<TComponentCatalogue extends Record<string, RenderableConstructor>> = {
+    [TComponentName in keyof TComponentCatalogue]: ExtendedComponentProps<TComponentCatalogue[TComponentName]>;
+};
+/**
+ * Global augmentation interface for extended components
+ * This will be augmented by user code using module augmentation
+ */
+export interface OpenTUIComponents {
+    [componentName: string]: RenderableConstructor;
+}
 export {};

package/src/types/extend.d.ts

@@ -1,15 +0,0 @@
-import type { Renderable } from "@opentui/core";
-import type React from "react";
-export type RenderableConstructor<T extends Renderable = Renderable> = new (id: string, options: any) => T;
-type ExtractRenderableOptions<T> = T extends new (id: string, options: infer O) => any ? O : never;
-export type ExtendedComponentProps<T extends RenderableConstructor> = ExtractRenderableOptions<T> & {
-    children?: React.ReactNode;
-    style?: Partial<ExtractRenderableOptions<T>>;
-};
-export type ExtendedIntrinsicElements<T extends Record<string, RenderableConstructor>> = {
-    [K in keyof T]: ExtendedComponentProps<T[K]>;
-};
-export interface OpenTUIComponents {
-    [key: string]: RenderableConstructor;
-}
-export {};