@tachui/primitives
Version:
Basic UI components for tachUI framework
269 lines • 9.44 kB
TypeScript
/**
* Enhanced Text Component
*
* SwiftUI-inspired Text component with full typography support,
* text formatting, and advanced styling capabilities.
*/
import type { ModifiableComponent, ModifierBuilder } from '@tachui/core';
import type { Signal } from '@tachui/core';
import type { ComponentInstance, ComponentProps } from '@tachui/core';
import type { Concatenatable } from '@tachui/core';
import { type ElementOverrideProps } from '@tachui/core';
import { ComponentWithCSSClasses, type CSSClassesProps } from '@tachui/core';
/**
* Text component properties with element override support and CSS classes
*/
export interface TextProps extends ComponentProps, ElementOverrideProps, CSSClassesProps {
content?: string | (() => string) | Signal<string>;
font?: {
family?: string;
size?: number | string;
weight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
style?: 'normal' | 'italic' | 'oblique';
variant?: 'normal' | 'small-caps';
};
color?: string | Signal<string>;
backgroundColor?: string | Signal<string>;
textAlign?: 'left' | 'center' | 'right' | 'justify';
textDecoration?: 'none' | 'underline' | 'line-through' | 'overline';
textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
lineHeight?: number | string;
letterSpacing?: number | string;
wordSpacing?: number | string;
lineLimit?: number;
truncationMode?: 'head' | 'tail' | 'middle';
allowsSelection?: boolean;
accessibilityLabel?: string;
accessibilityRole?: 'text' | 'heading' | 'label';
accessibilityLevel?: 1 | 2 | 3 | 4 | 5 | 6;
onTap?: () => void;
onLongPress?: () => void;
}
/**
* Text formatting options
*/
export interface TextFormatting {
bold?: boolean;
italic?: boolean;
underline?: boolean;
strikethrough?: boolean;
monospace?: boolean;
smallCaps?: boolean;
}
/**
* Typography presets following SwiftUI patterns
*/
export declare const Typography: {
largeTitle: {
size: number;
weight: "400";
lineHeight: number;
};
title: {
size: number;
weight: "400";
lineHeight: number;
};
title2: {
size: number;
weight: "400";
lineHeight: number;
};
title3: {
size: number;
weight: "400";
lineHeight: number;
};
headline: {
size: number;
weight: "600";
lineHeight: number;
};
body: {
size: number;
weight: "400";
lineHeight: number;
};
callout: {
size: number;
weight: "400";
lineHeight: number;
};
subheadline: {
size: number;
weight: "400";
lineHeight: number;
};
footnote: {
size: number;
weight: "400";
lineHeight: number;
};
caption: {
size: number;
weight: "400";
lineHeight: number;
};
caption2: {
size: number;
weight: "400";
lineHeight: number;
};
};
/**
* Enhanced Text component class with reactive content handling, concatenation support, element override, and CSS classes
*/
export declare class EnhancedText extends ComponentWithCSSClasses implements ComponentInstance<TextProps>, Concatenatable<TextProps> {
props: TextProps;
readonly type: "component";
readonly id: string;
mounted: boolean;
cleanup: (() => void)[];
private effectiveTag;
private validationResult;
constructor(props: TextProps);
/**
* Render the text component with reactive content handling, element override support, and CSS classes
*/
render(): import("@tachui/core").DOMNode[];
concat(_other: any): any;
toSegment(): any;
isConcatenatable(): boolean;
/**
* Cleanup resources
*/
dispose(): void;
}
/**
* Create enhanced Text component with modifier support and concatenation
*/
export declare function Text(content?: string | (() => string) | Signal<string>, additionalProps?: Partial<TextProps>): ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
/**
* Text formatting utility functions
*/
export declare const TextFormat: {
/**
* Create formatted text with multiple styling options
*/
formatted(content: string | (() => string) | Signal<string>, formatting: TextFormatting, additionalProps?: Partial<TextProps>): ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
/**
* Create bold text
*/
bold(content: string | (() => string) | Signal<string>, additionalProps?: Partial<TextProps>): ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
/**
* Create italic text
*/
italic(content: string | (() => string) | Signal<string>, additionalProps?: Partial<TextProps>): ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
/**
* Create underlined text
*/
underline(content: string | (() => string) | Signal<string>, additionalProps?: Partial<TextProps>): ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
/**
* Create monospace text
*/
monospace(content: string | (() => string) | Signal<string>, additionalProps?: Partial<TextProps>): ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
};
/**
* Text styling utilities
*/
export declare const TextStyles: {
heading: (level?: 1 | 2 | 3 | 4 | 5 | 6) => {
font: {
size: number;
weight: "400";
lineHeight: number;
} | {
size: number;
weight: "400";
lineHeight: number;
} | {
size: number;
weight: "400";
lineHeight: number;
} | {
size: number;
weight: "400";
lineHeight: number;
} | {
size: number;
weight: "600";
lineHeight: number;
} | {
size: number;
weight: "400";
lineHeight: number;
};
accessibilityRole: "heading";
accessibilityLevel: 2 | 1 | 3 | 4 | 5 | 6;
};
body: () => {
font: {
size: number;
weight: "400";
lineHeight: number;
};
accessibilityRole: "text";
};
caption: () => {
font: {
size: number;
weight: "400";
lineHeight: number;
};
color: string;
};
footnote: () => {
font: {
size: number;
weight: "400";
lineHeight: number;
};
color: string;
};
LargeTitle: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Title: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Title2: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Title3: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Headline: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Body: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Callout: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Subheadline: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Footnote: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Caption: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
Caption2: (content: string, additionalProps?: Partial<TextProps>) => ModifiableComponent<TextProps> & {
modifier: ModifierBuilder<ModifiableComponent<TextProps>>;
} & Concatenatable<TextProps>;
};
//# sourceMappingURL=Text.d.ts.map