rynex/dist/runtime/helpers/basic_elements.d.ts

A minimalist TypeScript framework for building reactive web applications with no virtual DOM

/**
 * Rynex Basic Elements
 * Basic HTML elements and components
 */
import { DOMProps, DOMChildren } from '../dom.js';
/**
 * Div element (generic container)
 */
export declare function div(props: DOMProps, ...children: DOMChildren[]): HTMLElement;
/**
 * Span element (inline container)
 */
export declare function span(props: DOMProps, ...children: DOMChildren[]): HTMLElement;
/**
 * Text element with reactive getter support
 * Usage: text('static') or text(() => `Count: ${state.count}`) or text({ class: 'foo' }, 'static') or text({ class: 'foo' }, () => `Count: ${state.count}`)
 */
export declare function text(props: DOMProps | string | (() => string), content?: string | (() => string)): HTMLElement;
/**
 * Button element with reactive text support
 * Usage: button({ onClick: ... }, 'Click') or button({ onClick: ... }, () => state.show ? 'Hide' : 'Show')
 */
export declare function button(props: DOMProps, content?: string | (() => string) | DOMChildren[]): HTMLElement;
/**
 * Input element
 */
export declare function input(props: DOMProps): HTMLInputElement;
/**
 * Image element
 */
export declare function image(props: DOMProps & {
    src: string;
    alt?: string;
    lazy?: boolean;
}): HTMLImageElement;
/**
 * Link/anchor element
 */
export declare function link(props: DOMProps & {
    href: string;
}, ...children: DOMChildren[]): HTMLAnchorElement;
/**
 * Label element
 */
export declare function label(props: DOMProps & {
    htmlFor?: string;
}, ...content: DOMChildren[]): HTMLLabelElement;
/**
 * Paragraph element
 */
export declare function p(props: DOMProps, ...content: DOMChildren[]): HTMLParagraphElement;
/**
 * List element with optimized rendering
 */
export declare function list<T>(props: DOMProps & {
    items: T[];
    renderItem: (item: T, index: number) => HTMLElement;
    keyExtractor?: (item: T, index: number) => string | number;
}): HTMLElement;
/**
 * Unordered list
 */
export declare function ul(props: DOMProps, ...children: DOMChildren[]): HTMLUListElement;
/**
 * Ordered list
 */
export declare function ol(props: DOMProps, ...children: DOMChildren[]): HTMLOListElement;
/**
 * List item
 */
export declare function li(props: DOMProps, ...content: DOMChildren[]): HTMLLIElement;
/**
 * Horizontal rule
 */
export declare function hr(props?: DOMProps): HTMLHRElement;
/**
 * Line break
 */
export declare function br(props?: DOMProps): HTMLBRElement;
/**
 * Description list
 */
export declare function dl(props: DOMProps, ...children: DOMChildren[]): HTMLDListElement;
/**
 * Description term
 */
export declare function dt(props: DOMProps, ...content: DOMChildren[]): HTMLElement;
/**
 * Description definition
 */
export declare function dd(props: DOMProps, ...content: DOMChildren[]): HTMLElement;
//# sourceMappingURL=basic_elements.d.ts.map