rynex
Version:
A minimalist TypeScript framework for building reactive web applications with no virtual DOM
103 lines • 2.47 kB
TypeScript
/**
* Rynex UI Components
* Pre-built UI components with common patterns
*/
import { DOMProps, DOMChildren } from '../dom.js';
/**
* Badge/Tag component
*/
export declare function badge(props: DOMProps & {
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
}, content: DOMChildren): HTMLElement;
/**
* Card component
*/
export declare function card(props: DOMProps, ...children: DOMChildren[]): HTMLElement;
/**
* Avatar component
*/
export declare function avatar(props: DOMProps & {
src: string;
alt?: string;
size?: string | number;
}): HTMLElement;
/**
* Icon wrapper component - for SVG icons
*/
export declare function icon(props: DOMProps & {
size?: string | number;
}, svgContent: string): HTMLElement;
/**
* Tooltip component (simple implementation)
*/
export declare function tooltip(props: DOMProps & {
text: string;
}, ...children: DOMChildren[]): HTMLElement;
/**
* Modal/Dialog component
*/
export declare function modal(props: DOMProps & {
open?: boolean;
onClose?: () => void;
}, ...children: DOMChildren[]): HTMLElement;
/**
* Dropdown menu component
*/
export declare function dropdown(props: DOMProps & {
items: Array<{
label: string;
onClick: () => void;
}>;
}, trigger: DOMChildren): HTMLElement;
/**
* Toggle/Switch component
*/
export declare function toggle(props: DOMProps & {
checked?: boolean;
onChange?: (checked: boolean) => void;
}): HTMLElement;
/**
* Slider/Range component
*/
export declare function slider(props: DOMProps & {
min?: number;
max?: number;
value?: number;
onChange?: (value: number) => void;
}): HTMLElement;
/**
* Progress bar component
*/
export declare function progressBar(props: DOMProps & {
value: number;
max?: number;
}): HTMLElement;
/**
* Spinner/Loading component
*/
export declare function spinner(props: DOMProps & {
size?: string | number;
}): HTMLElement;
/**
* Tabs component
*/
export declare function tabs(props: DOMProps & {
tabs: Array<{
label: string;
content: HTMLElement;
}>;
defaultIndex?: number;
onChange?: (index: number) => void;
}): HTMLElement;
/**
* Accordion component
*/
export declare function accordion(props: DOMProps & {
items: Array<{
title: string;
content: HTMLElement;
}>;
allowMultiple?: boolean;
defaultOpen?: number[];
}): HTMLElement;
//# sourceMappingURL=components.d.ts.map