@opentui/react 0.1.7 → 0.1.8

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 };

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.8",
   "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.8",
     "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/index.d.ts

@@ -4,5 +4,4 @@ export * from "./hooks/use-keyboard";
 export * from "./hooks/use-renderer";
 export * from "./hooks/use-resize";
 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 {};