@rxxuzi/gumi/dist/types/types.d.ts

Clean & minimal design system with delightful interactions

export interface GumiOptions {
    duration?: number;
    easing?: string;
    delay?: number;
}
export interface AnimationOptions extends GumiOptions {
    fill?: FillMode;
    iterations?: number;
    direction?: PlaybackDirection;
}
export interface ToastOptions {
    type?: 'info' | 'success' | 'warning' | 'error';
    duration?: number;
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
}
export interface ModalOptions {
    backdrop?: boolean;
    keyboard?: boolean;
    focus?: boolean;
}
export interface ThemeOptions {
    theme: 'light' | 'dark' | 'auto';
    savePreference?: boolean;
}
export interface ProgressOptions {
    value: number;
    animated?: boolean;
    striped?: boolean;
}
export interface DropdownOptions {
    trigger?: 'click' | 'hover';
    closeOnClick?: boolean;
    keyboard?: boolean;
}
export interface AccordionOptions {
    multiple?: boolean;
    collapsed?: boolean;
}
export interface TabOptions {
    activeIndex?: number;
    onChange?: (index: number) => void;
}
export interface ValidatorRule {
    required?: boolean;
    min?: number;
    max?: number;
    pattern?: RegExp;
    custom?: (value: any) => boolean;
    message?: string;
}
export interface FormValidationOptions {
    rules?: Record<string, ValidatorRule>;
    showErrors?: boolean;
    validateOnChange?: boolean;
}
export type GumiElement = Element | HTMLElement | string | null;
export interface GumiEventMap {
    'theme-change': CustomEvent<{
        theme: string;
    }>;
    'modal-open': CustomEvent<{
        modal: HTMLElement;
    }>;
    'modal-close': CustomEvent<{
        modal: HTMLElement;
    }>;
    'toast-show': CustomEvent<{
        toast: HTMLElement;
    }>;
    'toast-hide': CustomEvent<{
        toast: HTMLElement;
    }>;
    'tab-change': CustomEvent<{
        index: number;
    }>;
    'accordion-toggle': CustomEvent<{
        item: HTMLElement;
        open: boolean;
    }>;
    'switch-change': CustomEvent<{
        checked: boolean;
    }>;
    'gumi:dropdown:show': CustomEvent<{
        dropdown: any;
    }>;
    'gumi:dropdown:hide': CustomEvent<{
        dropdown: any;
    }>;
}