cosmic-ui-lite/dist/index.d.ts

A lightweight, futuristic, space-themed UI component library built with TypeScript and vanilla JavaScript

interface CosmicButtonOptions {
    text: string;
    variant?: 'default' | 'primary' | 'secondary' | 'danger';
    onClick?: () => void;
    disabled?: boolean;
    className?: string;
}
interface CosmicModalOptions {
    title: string;
    content: string | HTMLElement;
    showCloseButton?: boolean;
    buttons: CosmicButtonOptions[];
    onClose?: () => void;
    className?: string;
}
interface CosmicCardOptions {
    title?: string;
    content: string | HTMLElement;
    className?: string;
}
interface CosmicInfoOptions {
    title?: string;
    titleColor?: 'yellow' | 'green' | 'blue' | 'purple' | 'golden-red';
    content: string | HTMLElement;
    className?: string;
    onClose?: () => void;
}
interface CosmicTagOptions {
    title?: string;
    content: string | HTMLElement;
    className?: string;
    flipped?: boolean;
}
type TitleColorTheme = 'yellow' | 'green' | 'blue' | 'purple' | 'golden-red';
type ButtonVariant = 'default' | 'primary' | 'secondary' | 'danger';
interface ComponentEventHandlers {
    onClick?: () => void;
    onClose?: () => void;
    onConfirm?: () => void;
    onCancel?: () => void;
}
interface SVGPathDefinitions {
    MODAL_BACKGROUND: string;
    MODAL_BORDER: string;
    BUTTON_BACKGROUND: string;
    BUTTON_BORDER: string;
}
interface SVGViewBoxes {
    MODAL: string;
    BUTTON: string;
}
interface CSSClassNames {
    BUTTON_WRAPPER: 'cosmic-btn-wrapper';
    MODAL_WRAPPER: 'cosmic-modal-wrapper';
    CARD_WRAPPER: 'cosmic-card-wrapper';
    TAG_WRAPPER: 'cosmic-tag-wrapper';
    INFO_WRAPPER: 'cosmic-info-wrapper';
    COSMIC_BG: 'cosmic-bg';
    COSMIC_BORDER: 'cosmic-border';
    COSMIC_CONTENT: 'cosmic-content';
    COSMIC_HEADER: 'cosmic-header';
    COSMIC_HEADER_BORDERED: 'cosmic-header-bordered';
    COSMIC_TITLE: 'cosmic-title';
    COSMIC_TITLE_ENHANCED: 'cosmic-title-enhanced';
    MODAL_OVERLAY: 'cosmic-modal-overlay';
    INFO_OVERLAY: 'cosmic-info-overlay';
}
interface AnimationConfig {
    duration?: number;
    easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
    delay?: number;
    infinite?: boolean;
}
interface ResponsiveBreakpoints {
    small: '430px';
    mobile: '480px';
    tablet: '580px';
    desktop: '900px';
}
interface CosmicUIInterface {
    createButton(options: CosmicButtonOptions): HTMLElement;
    createModal(options: CosmicModalOptions): HTMLElement;
    createCard(options: CosmicCardOptions): HTMLElement;
    createInfo(options: CosmicInfoOptions): HTMLElement;
    createTag(options: CosmicTagOptions): HTMLElement;
    showModal(modal: HTMLElement): void;
    showError(title: string, message: string): void;
    showConfirmation(title: string, message: string, onConfirm: () => void, onCancel?: () => void): void;
    showNotification(title: string, message: string): void;
}

declare class CosmicButton {
    /**
     * Creates a cosmic-themed button with angled corners and glowing effects using SVG shape
     */
    static create(options: CosmicButtonOptions): HTMLButtonElement;
}

declare class CosmicModal {
    /**
     * Creates a cosmic-themed modal with backdrop blur and slide-in animation using SVG shape
     */
    static create(options: CosmicModalOptions): HTMLDivElement;
    /**
     * Shows a modal by adding it to the document body
     */
    static show(modal: HTMLDivElement): void;
    /**
     * Closes and removes a modal from the document
     */
    static close(modal: HTMLDivElement): void;
}

declare class CosmicCard {
    /**
     * Creates a cosmic-themed card with angled corners and subtle glow using SVG shape
     */
    static create(options: CosmicCardOptions): HTMLDivElement;
}

declare class CosmicInfo {
    /**
     * Create an info popup with modal-like styling but no buttons or close button
     */
    static create(options: CosmicInfoOptions): HTMLDivElement;
}

declare class CosmicTag {
    /**
     * Creates a cosmic-themed tag (like modal but without overlay and buttons) using SVG shape
     */
    static create(options: CosmicTagOptions): HTMLDivElement;
}

declare class CosmicUI {
    static createButton: typeof CosmicButton.create;
    static createModal: typeof CosmicModal.create;
    static createCard: typeof CosmicCard.create;
    static createInfo: typeof CosmicInfo.create;
    static createTag: typeof CosmicTag.create;
    static showModal: typeof CosmicModal.show;
    static closeModal: typeof CosmicModal.close;
    /**
     * Utility method to create a confirmation modal
     */
    static showConfirmation(title: string, message: string, onConfirm: () => void, onCancel?: () => void): void;
    /**
     * Utility method to create an notification modal
     */
    static showNotification(title: string, message: string, onClose?: () => void): void;
    /**
     * Utility method to create an error modal
     */
    static showError(title: string, message: string, onClose?: () => void): void;
}

export { CosmicButton, CosmicCard, CosmicInfo, CosmicModal, CosmicTag, CosmicUI, CosmicUI as default };
export type { AnimationConfig, ButtonVariant, CSSClassNames, ComponentEventHandlers, CosmicButtonOptions, CosmicCardOptions, CosmicInfoOptions, CosmicModalOptions, CosmicTagOptions, CosmicUIInterface, ResponsiveBreakpoints, SVGPathDefinitions, SVGViewBoxes, TitleColorTheme };