vex-ui-kit 1.0.0

package/dist/index-CpFq7Lxe.d.mts

@@ -0,0 +1,213 @@
+interface HistoryEntry {
+    id: string;
+    type: string;
+    title?: string;
+    message: string;
+    timestamp: Date;
+    read: boolean;
+}
+declare class HistoryManager {
+    private entries;
+    private limit;
+    private storageKey;
+    constructor();
+    add(entry: Omit<HistoryEntry, 'timestamp' | 'read'>): void;
+    get(): HistoryEntry[];
+    clear(): void;
+    markAllRead(): void;
+    markRead(id: string): void;
+    open(anchorSelector: string): void;
+    private save;
+    private load;
+}
+
+interface ThemeTokens {
+    [key: string]: string;
+}
+
+interface AlertAction {
+    label: string;
+    variant?: 'primary' | 'danger' | 'default';
+    onClick?: (close: () => void) => void;
+}
+interface AlertOptions {
+    type?: 'success' | 'error' | 'warning' | 'info' | 'neutral' | 'loading' | 'upload';
+    title?: string;
+    message: string;
+    duration?: number;
+    dismissible?: boolean;
+    icon?: string | null;
+    progress?: boolean;
+    actions?: AlertAction[];
+    priority?: 'critical' | 'high' | 'normal' | 'low';
+    position?: 'top' | 'bottom';
+    align?: 'center' | 'left' | 'right';
+    animate?: 'slide' | 'fade' | 'scale' | 'bounce';
+    maxStack?: number;
+    theme?: Partial<ThemeTokens>;
+    onClose?: () => void;
+    renderer?: 'fixed' | 'inline' | 'attach';
+    selector?: string | HTMLElement;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    total?: number;
+}
+declare class AlertEngine {
+    private queue;
+    private activeAlerts;
+    constructor();
+    success(message: string, opts?: Partial<AlertOptions>): string;
+    error(message: string, opts?: Partial<AlertOptions>): string;
+    warning(message: string, opts?: Partial<AlertOptions>): string;
+    info(message: string, opts?: Partial<AlertOptions>): string;
+    neutral(message: string, opts?: Partial<AlertOptions>): string;
+    loading(message: string, opts?: Partial<AlertOptions>): string;
+    upload(message: string, opts?: Partial<AlertOptions>): string;
+    inline(selector: string | HTMLElement, opts: AlertOptions): string;
+    fixed(opts: AlertOptions): string;
+    attach(selector: string | HTMLElement, opts: AlertOptions): string;
+    show(opts: AlertOptions): string;
+    private create;
+    private processOptions;
+    private render;
+    private mount;
+    private positionAttached;
+    dismiss(id: string): void;
+    dismissAll(filter?: {
+        type?: string;
+        position?: string;
+    }): void;
+    update(id: string, opts: Partial<AlertOptions>): void;
+    progress(id: string, value: number | {
+        loaded: number;
+        total: number;
+    }): void;
+    private generateId;
+    private getIcon;
+}
+
+interface ModalOptions {
+    type?: 'danger' | 'warning' | 'info' | 'success';
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmDelay?: number;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    width?: number;
+    animate?: 'scale' | 'slide' | 'fade';
+    showClose?: boolean;
+    stackable?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    content?: string | HTMLElement;
+    footer?: boolean;
+}
+interface FormField {
+    name: string;
+    label: string;
+    type: 'text' | 'email' | 'password' | 'number' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date' | 'file' | 'range' | 'color';
+    options?: string[];
+    required?: boolean;
+    placeholder?: string;
+    defaultValue?: any;
+    validate?: (value: any) => string | null;
+}
+interface FormOptions extends ModalOptions {
+    fields: FormField[];
+    submitLabel?: string;
+    validate?: (data: Record<string, any>) => Record<string, string> | null;
+}
+declare class ModalEngine {
+    private activeModals;
+    confirm(opts: ModalOptions): Promise<boolean>;
+    alert(opts: ModalOptions): Promise<void>;
+    form(opts: FormOptions): Promise<Record<string, any> | null>;
+    prompt(opts: ModalOptions & {
+        defaultValue?: string;
+        placeholder?: string;
+        validate?: (v: string) => string | null;
+    }): Promise<string | null>;
+    preview(opts: ModalOptions & {
+        src: string;
+        meta?: string[];
+        gallery?: string[];
+    }): void;
+    custom(opts: ModalOptions): {
+        close: () => void;
+    };
+    private create;
+    private close;
+    private getIcon;
+}
+
+interface DrawerAction {
+    label: string;
+    variant?: 'primary' | 'danger' | 'default';
+    onClick?: (close: () => void) => void;
+}
+interface DrawerOptions {
+    title?: string;
+    position: 'right' | 'left' | 'top' | 'bottom';
+    width?: number;
+    height?: number;
+    content: string | HTMLElement;
+    persistent?: boolean;
+    footer?: DrawerAction[];
+    onClose?: () => void;
+    className?: string;
+}
+declare function drawer(opts: DrawerOptions): {
+    close: () => void;
+};
+
+interface FlowStep {
+    title: string;
+    type?: 'info' | 'success' | 'warning' | 'danger';
+    description?: string;
+    fields?: FormField[];
+    condition?: (accumulatedData: Record<string, any>) => boolean;
+    beforeNext?: (stepData: Record<string, any>) => Promise<Record<string, string> | null>;
+}
+declare function flow(steps: FlowStep[]): Promise<Record<string, any> | null>;
+
+declare const alert: AlertEngine;
+declare const modal: ModalEngine;
+declare const history: HistoryManager;
+
+interface VexConfig {
+    duration?: number;
+    position?: 'top' | 'bottom';
+    maxStack?: number;
+    theme?: 'dark' | 'light' | 'auto';
+}
+declare function configure(opts: VexConfig): void;
+declare function setTheme(theme: 'dark' | 'light' | 'auto'): void;
+declare function dismiss(id: string): void;
+declare function dismissAll(filter?: {
+    type?: string;
+    position?: string;
+}): void;
+declare function update(id: string, opts: Partial<AlertOptions>): void;
+declare function progress(id: string, value: number | {
+    loaded: number;
+    total: number;
+}): void;
+declare const vex: {
+    alert: AlertEngine;
+    modal: ModalEngine;
+    drawer: typeof drawer;
+    flow: typeof flow;
+    history: HistoryManager;
+    configure: typeof configure;
+    setTheme: typeof setTheme;
+    dismiss: typeof dismiss;
+    dismissAll: typeof dismissAll;
+    update: typeof update;
+    progress: typeof progress;
+    prompt: {
+        inline: (selector: string | HTMLElement, opts: any) => Promise<unknown>;
+    };
+};
+
+export { type AlertOptions as A, type DrawerOptions as D, type FlowStep as F, HistoryManager as H, ModalEngine as M, type VexConfig as V, dismiss as a, dismissAll as b, configure as c, drawer as d, AlertEngine as e, flow as f, type FormOptions as g, type ModalOptions as h, alert as i, history as j, modal as m, progress as p, setTheme as s, update as u, vex as v };

package/dist/index-CpFq7Lxe.d.ts

@@ -0,0 +1,213 @@
+interface HistoryEntry {
+    id: string;
+    type: string;
+    title?: string;
+    message: string;
+    timestamp: Date;
+    read: boolean;
+}
+declare class HistoryManager {
+    private entries;
+    private limit;
+    private storageKey;
+    constructor();
+    add(entry: Omit<HistoryEntry, 'timestamp' | 'read'>): void;
+    get(): HistoryEntry[];
+    clear(): void;
+    markAllRead(): void;
+    markRead(id: string): void;
+    open(anchorSelector: string): void;
+    private save;
+    private load;
+}
+
+interface ThemeTokens {
+    [key: string]: string;
+}
+
+interface AlertAction {
+    label: string;
+    variant?: 'primary' | 'danger' | 'default';
+    onClick?: (close: () => void) => void;
+}
+interface AlertOptions {
+    type?: 'success' | 'error' | 'warning' | 'info' | 'neutral' | 'loading' | 'upload';
+    title?: string;
+    message: string;
+    duration?: number;
+    dismissible?: boolean;
+    icon?: string | null;
+    progress?: boolean;
+    actions?: AlertAction[];
+    priority?: 'critical' | 'high' | 'normal' | 'low';
+    position?: 'top' | 'bottom';
+    align?: 'center' | 'left' | 'right';
+    animate?: 'slide' | 'fade' | 'scale' | 'bounce';
+    maxStack?: number;
+    theme?: Partial<ThemeTokens>;
+    onClose?: () => void;
+    renderer?: 'fixed' | 'inline' | 'attach';
+    selector?: string | HTMLElement;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    total?: number;
+}
+declare class AlertEngine {
+    private queue;
+    private activeAlerts;
+    constructor();
+    success(message: string, opts?: Partial<AlertOptions>): string;
+    error(message: string, opts?: Partial<AlertOptions>): string;
+    warning(message: string, opts?: Partial<AlertOptions>): string;
+    info(message: string, opts?: Partial<AlertOptions>): string;
+    neutral(message: string, opts?: Partial<AlertOptions>): string;
+    loading(message: string, opts?: Partial<AlertOptions>): string;
+    upload(message: string, opts?: Partial<AlertOptions>): string;
+    inline(selector: string | HTMLElement, opts: AlertOptions): string;
+    fixed(opts: AlertOptions): string;
+    attach(selector: string | HTMLElement, opts: AlertOptions): string;
+    show(opts: AlertOptions): string;
+    private create;
+    private processOptions;
+    private render;
+    private mount;
+    private positionAttached;
+    dismiss(id: string): void;
+    dismissAll(filter?: {
+        type?: string;
+        position?: string;
+    }): void;
+    update(id: string, opts: Partial<AlertOptions>): void;
+    progress(id: string, value: number | {
+        loaded: number;
+        total: number;
+    }): void;
+    private generateId;
+    private getIcon;
+}
+
+interface ModalOptions {
+    type?: 'danger' | 'warning' | 'info' | 'success';
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmDelay?: number;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    width?: number;
+    animate?: 'scale' | 'slide' | 'fade';
+    showClose?: boolean;
+    stackable?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    content?: string | HTMLElement;
+    footer?: boolean;
+}
+interface FormField {
+    name: string;
+    label: string;
+    type: 'text' | 'email' | 'password' | 'number' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date' | 'file' | 'range' | 'color';
+    options?: string[];
+    required?: boolean;
+    placeholder?: string;
+    defaultValue?: any;
+    validate?: (value: any) => string | null;
+}
+interface FormOptions extends ModalOptions {
+    fields: FormField[];
+    submitLabel?: string;
+    validate?: (data: Record<string, any>) => Record<string, string> | null;
+}
+declare class ModalEngine {
+    private activeModals;
+    confirm(opts: ModalOptions): Promise<boolean>;
+    alert(opts: ModalOptions): Promise<void>;
+    form(opts: FormOptions): Promise<Record<string, any> | null>;
+    prompt(opts: ModalOptions & {
+        defaultValue?: string;
+        placeholder?: string;
+        validate?: (v: string) => string | null;
+    }): Promise<string | null>;
+    preview(opts: ModalOptions & {
+        src: string;
+        meta?: string[];
+        gallery?: string[];
+    }): void;
+    custom(opts: ModalOptions): {
+        close: () => void;
+    };
+    private create;
+    private close;
+    private getIcon;
+}
+
+interface DrawerAction {
+    label: string;
+    variant?: 'primary' | 'danger' | 'default';
+    onClick?: (close: () => void) => void;
+}
+interface DrawerOptions {
+    title?: string;
+    position: 'right' | 'left' | 'top' | 'bottom';
+    width?: number;
+    height?: number;
+    content: string | HTMLElement;
+    persistent?: boolean;
+    footer?: DrawerAction[];
+    onClose?: () => void;
+    className?: string;
+}
+declare function drawer(opts: DrawerOptions): {
+    close: () => void;
+};
+
+interface FlowStep {
+    title: string;
+    type?: 'info' | 'success' | 'warning' | 'danger';
+    description?: string;
+    fields?: FormField[];
+    condition?: (accumulatedData: Record<string, any>) => boolean;
+    beforeNext?: (stepData: Record<string, any>) => Promise<Record<string, string> | null>;
+}
+declare function flow(steps: FlowStep[]): Promise<Record<string, any> | null>;
+
+declare const alert: AlertEngine;
+declare const modal: ModalEngine;
+declare const history: HistoryManager;
+
+interface VexConfig {
+    duration?: number;
+    position?: 'top' | 'bottom';
+    maxStack?: number;
+    theme?: 'dark' | 'light' | 'auto';
+}
+declare function configure(opts: VexConfig): void;
+declare function setTheme(theme: 'dark' | 'light' | 'auto'): void;
+declare function dismiss(id: string): void;
+declare function dismissAll(filter?: {
+    type?: string;
+    position?: string;
+}): void;
+declare function update(id: string, opts: Partial<AlertOptions>): void;
+declare function progress(id: string, value: number | {
+    loaded: number;
+    total: number;
+}): void;
+declare const vex: {
+    alert: AlertEngine;
+    modal: ModalEngine;
+    drawer: typeof drawer;
+    flow: typeof flow;
+    history: HistoryManager;
+    configure: typeof configure;
+    setTheme: typeof setTheme;
+    dismiss: typeof dismiss;
+    dismissAll: typeof dismissAll;
+    update: typeof update;
+    progress: typeof progress;
+    prompt: {
+        inline: (selector: string | HTMLElement, opts: any) => Promise<unknown>;
+    };
+};
+
+export { type AlertOptions as A, type DrawerOptions as D, type FlowStep as F, HistoryManager as H, ModalEngine as M, type VexConfig as V, dismiss as a, dismissAll as b, configure as c, drawer as d, AlertEngine as e, flow as f, type FormOptions as g, type ModalOptions as h, alert as i, history as j, modal as m, progress as p, setTheme as s, update as u, vex as v };

package/dist/themes/flat.css

@@ -0,0 +1,47 @@
+/* VexUI Flat Theme */
+:root {
+  --vex-blur: 0px;
+  --vex-backdrop-blur: 0px;
+  --vex-shadow: 0 2px 5px rgba(0,0,0,0.05);
+  --vex-shadow-modal: 0 10px 25px rgba(0,0,0,0.1);
+  --vex-radius-alert: 6px;
+  --vex-radius-modal: 12px;
+
+  /* Light Flat Colors */
+  --vex-success-bg:      #dcfce7;
+  --vex-success-border:  #86efac;
+  --vex-success-text:    #166534;
+  --vex-success-accent:  #16a34a;
+  --vex-success-icon-bg: #bbf7d0;
+
+  --vex-error-bg:      #fee2e2;
+  --vex-error-border:  #fca5a5;
+  --vex-error-text:    #991b1b;
+  --vex-error-accent:  #dc2626;
+  --vex-error-icon-bg: #fecaca;
+
+  --vex-warning-bg:      #fef3c7;
+  --vex-warning-border:  #fcd34d;
+  --vex-warning-text:    #92400e;
+  --vex-warning-accent:  #d97706;
+  --vex-warning-icon-bg: #fde68a;
+
+  --vex-info-bg:      #e0e7ff;
+  --vex-info-border:  #a5b4fc;
+  --vex-info-text:    #3730a3;
+  --vex-info-accent:  #4f46e5;
+  --vex-info-icon-bg: #c7d2fe;
+
+  --vex-neutral-bg:      #f1f5f9;
+  --vex-neutral-border:  #cbd5e1;
+  --vex-neutral-text:    #0f172a;
+  --vex-neutral-accent:  #64748b;
+  --vex-neutral-icon-bg: #e2e8f0;
+
+  --vex-modal-bg:      #ffffff;
+  --vex-modal-border:  #e2e8f0;
+  --vex-backdrop-bg:   rgba(0,0,0,0.4);
+  
+  --vex-drawer-bg:     #ffffff;
+  --vex-drawer-border: #e2e8f0;
+}

package/dist/themes/glass.css

@@ -0,0 +1,22 @@
+/* VexUI Glass Theme (Default) */
+/* This theme is applied by default in tokens.css */
+/* Importing this file ensures glass tokens are active if they were overridden */
+
+:root {
+  --vex-blur: 20px;
+  --vex-backdrop-blur: 12px;
+  --vex-radius-alert: 14px;
+  --vex-radius-modal: 22px;
+  
+  /* Reset colors to default glass values */
+  --vex-success-bg:      rgba(5, 25, 14, 0.88);
+  --vex-success-border:  rgba(34, 197, 94, 0.28);
+  --vex-success-text:    #dcfce7;
+  
+  --vex-error-bg:      rgba(25, 5, 5, 0.88);
+  --vex-error-border:  rgba(239, 68, 68, 0.28);
+  --vex-error-text:    #fee2e2;
+  
+  --vex-modal-bg:      rgba(10, 14, 26, 0.95);
+  --vex-neutral-text:  #e2e8f0;
+}

package/dist/themes/minimal.css

@@ -0,0 +1,35 @@
+/* VexUI Minimal Theme */
+:root {
+  --vex-blur: 0px;
+  --vex-backdrop-blur: 2px;
+  --vex-radius-alert: 2px;
+  --vex-radius-modal: 4px;
+  --vex-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  --vex-border-width: 0px;
+
+  --vex-success-bg:      #ffffff;
+  --vex-success-border:  transparent;
+  --vex-success-text:    #065f46;
+  --vex-success-accent:  #10b981;
+
+  --vex-error-bg:      #ffffff;
+  --vex-error-border:  transparent;
+  --vex-error-text:    #991b1b;
+  --vex-error-accent:  #ef4444;
+  
+  /* ... others ... */
+  --vex-modal-bg:      #ffffff;
+  --vex-neutral-text:  #111827;
+}
+
+/* Minimal override specific styles */
+.vex-alert {
+  border: none;
+  border-left: 3px solid var(--vex-info-accent);
+  background: #ffffff;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+.vex-success { border-left-color: #10b981; }
+.vex-error   { border-left-color: #ef4444; }
+.vex-warning { border-left-color: #f59e0b; }
+.vex-info    { border-left-color: #3b82f6; }

package/dist/themes/neon.css

@@ -0,0 +1,45 @@
+/* VexUI Neon Theme */
+:root {
+  --vex-blur: 10px;
+  --vex-backdrop-blur: 5px;
+  --vex-radius-alert: 4px;
+  --vex-radius-modal: 8px;
+  --vex-shadow: 0 0 15px rgba(0,0,0,0.5);
+
+  --vex-success-bg:      rgba(0, 30, 10, 0.95);
+  --vex-success-border:  #00ff7f;
+  --vex-success-text:    #00ff7f;
+  --vex-success-accent:  #00ff7f;
+  
+  --vex-error-bg:      rgba(30, 0, 0, 0.95);
+  --vex-error-border:  #ff3232;
+  --vex-error-text:    #ff3232;
+  --vex-error-accent:  #ff3232;
+
+  --vex-warning-bg:      rgba(30, 20, 0, 0.95);
+  --vex-warning-border:  #ffff00;
+  --vex-warning-text:    #ffff00;
+  --vex-warning-accent:  #ffff00;
+
+  --vex-info-bg:      rgba(0, 0, 30, 0.95);
+  --vex-info-border:  #00ffff;
+  --vex-info-text:    #00ffff;
+  --vex-info-accent:  #00ffff;
+
+  --vex-neutral-bg:      rgba(10, 10, 10, 0.95);
+  --vex-neutral-border:  #ffffff;
+  --vex-neutral-text:    #ffffff;
+  
+  --vex-modal-bg:      #050a12;
+  --vex-modal-border:  #00ffff;
+  --vex-drawer-bg:     #050a12;
+  --vex-drawer-border: #00ffff;
+}
+
+.vex-alert, .vex-modal {
+  box-shadow: 0 0 10px var(--vex-info-border);
+}
+.vex-success { box-shadow: 0 0 10px #00ff7f; text-shadow: 0 0 5px #00ff7f; }
+.vex-error   { box-shadow: 0 0 10px #ff3232; text-shadow: 0 0 5px #ff3232; }
+.vex-warning { box-shadow: 0 0 10px #ffff00; text-shadow: 0 0 5px #ffff00; }
+.vex-info    { box-shadow: 0 0 10px #00ffff; text-shadow: 0 0 5px #00ffff; }

package/dist/themes/outline.css

@@ -0,0 +1,18 @@
+/* VexUI Outline Theme */
+:root {
+  --vex-blur: 0px;
+  --vex-backdrop-blur: 8px;
+  --vex-border-width: 1.5px;
+  
+  --vex-success-bg:      transparent;
+  --vex-success-border:  rgba(34, 197, 94, 0.7);
+  --vex-success-text:    #4ade80;
+  
+  --vex-error-bg:      transparent;
+  --vex-error-border:  rgba(239, 68, 68, 0.7);
+  --vex-error-text:    #f87171;
+  
+  --vex-modal-bg:      #09090b;
+  --vex-modal-border:  rgba(255,255,255,0.2);
+  --vex-neutral-text:  #a1a1aa;
+}

package/dist/themes/pastel.css

@@ -0,0 +1,21 @@
+/* VexUI Pastel Theme */
+:root {
+  --vex-blur: 0px;
+  --vex-backdrop-blur: 4px;
+  --vex-radius-alert: 20px;
+  --vex-radius-modal: 24px;
+  --vex-shadow: 0 4px 15px rgba(0,0,0,0.03);
+
+  --vex-success-bg:      #f0fdf4;
+  --vex-success-border:  #bbf7d0;
+  --vex-success-text:    #15803d;
+  --vex-success-accent:  #22c55e;
+
+  --vex-error-bg:      #fff1f2;
+  --vex-error-border:  #fecdd3;
+  --vex-error-text:    #be123c;
+  --vex-error-accent:  #f43f5e;
+  
+  --vex-modal-bg:      #fdf4ff;
+  --vex-neutral-text:  #4a044e;
+}