juxscript 1.1.4 → 1.1.6

package/lib/components/theme-toggle.js

@@ -0,0 +1,215 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['themeChange'];
+export class ThemeToggle extends BaseComponent {
+    constructor(id, options = {}) {
+        const defaultThemes = [
+            { id: 'light', label: 'Light', icon: '☀️' },
+            { id: 'dark', label: 'Dark', icon: '🌙' }
+        ];
+        super(id, {
+            themes: options.themes ?? defaultThemes,
+            currentTheme: options.defaultTheme ?? ThemeToggle.detectTheme(options.storageKey),
+            storageKey: options.storageKey ?? 'jux-theme',
+            showLabel: options.showLabel ?? false,
+            variant: options.variant ?? 'button',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        // Apply theme on initialization
+        this.applyTheme(this.state.currentTheme);
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * STATIC METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+    static detectTheme(storageKey = 'jux-theme') {
+        if (typeof window === 'undefined')
+            return 'light';
+        const stored = localStorage.getItem(storageKey);
+        if (stored)
+            return stored;
+        const current = document.body.getAttribute('data-theme');
+        if (current)
+            return current;
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent
+    themes(value) {
+        this.state.themes = value;
+        return this;
+    }
+    variant(value) {
+        this.state.variant = value;
+        return this;
+    }
+    showLabel(value) {
+        this.state.showLabel = value;
+        return this;
+    }
+    setTheme(themeId) {
+        const theme = this.state.themes.find(t => t.id === themeId);
+        if (!theme) {
+            console.warn(`Theme "${themeId}" not found in available themes`);
+            return this;
+        }
+        this.state.currentTheme = themeId;
+        this.applyTheme(themeId);
+        this._updateDOM();
+        return this;
+    }
+    getTheme() {
+        return this.state.currentTheme;
+    }
+    addTheme(theme) {
+        if (!this.state.themes.find(t => t.id === theme.id)) {
+            this.state.themes.push(theme);
+        }
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+    applyTheme(themeId) {
+        if (typeof document === 'undefined')
+            return;
+        try {
+            document.body.setAttribute('data-theme', themeId);
+            document.documentElement.setAttribute('data-theme', themeId);
+            localStorage.setItem(this.state.storageKey, themeId);
+            window.dispatchEvent(new CustomEvent('themechange', {
+                detail: { theme: themeId }
+            }));
+            // 🎯 Fire the themeChange callback event
+            this._triggerCallback('themeChange', themeId);
+            console.log(`🎨 Theme applied: ${themeId}`);
+        }
+        catch (error) {
+            throw new Error(`Failed to apply theme "${themeId}": ${error.message}`);
+        }
+    }
+    cycleTheme() {
+        const currentIndex = this.state.themes.findIndex(t => t.id === this.state.currentTheme);
+        const nextIndex = (currentIndex + 1) % this.state.themes.length;
+        const nextTheme = this.state.themes[nextIndex];
+        this.setTheme(nextTheme.id);
+    }
+    _updateDOM() {
+        if (!this.container)
+            return;
+        const toggle = this.container.querySelector(`#${this._id}`);
+        if (!toggle)
+            return;
+        const currentTheme = this.state.themes.find(t => t.id === this.state.currentTheme);
+        if (!currentTheme)
+            return;
+        if (this.state.variant === 'button' || this.state.variant === 'cycle') {
+            const button = toggle.querySelector('button');
+            if (button && currentTheme.icon) {
+                button.innerHTML = '';
+                const iconElement = renderIcon(currentTheme.icon, currentTheme.iconCollection);
+                button.appendChild(iconElement);
+                if (this.state.showLabel) {
+                    const labelSpan = document.createElement('span');
+                    labelSpan.textContent = ` ${currentTheme.label}`;
+                    button.appendChild(labelSpan);
+                }
+                requestAnimationFrame(() => {
+                    if (window.Iconify) {
+                        window.Iconify.scan();
+                    }
+                });
+            }
+        }
+        if (this.state.variant === 'dropdown') {
+            const select = toggle.querySelector('select');
+            if (select) {
+                select.value = this.state.currentTheme;
+            }
+        }
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        const container = this._setupContainer(targetId);
+        const { themes, currentTheme, showLabel, variant, style, class: className } = this.state;
+        const wrapper = document.createElement('div');
+        wrapper.className = `jux-theme-toggle`;
+        wrapper.id = this._id;
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+        const theme = themes.find(t => t.id === currentTheme);
+        if (variant === 'button' || variant === 'cycle') {
+            const button = document.createElement('button');
+            button.className = 'jux-theme-toggle-button';
+            button.type = 'button';
+            button.setAttribute('aria-label', 'Toggle theme');
+            if (theme?.icon) {
+                const iconElement = renderIcon(theme.icon, theme.iconCollection);
+                button.appendChild(iconElement);
+            }
+            if (showLabel) {
+                const labelSpan = document.createElement('span');
+                labelSpan.textContent = ` ${theme?.label || currentTheme}`;
+                button.appendChild(labelSpan);
+            }
+            else if (!theme?.icon) {
+                button.textContent = theme?.label || currentTheme;
+            }
+            button.addEventListener('click', () => {
+                this.cycleTheme();
+            });
+            wrapper.appendChild(button);
+        }
+        else if (variant === 'dropdown') {
+            const select = document.createElement('select');
+            select.className = 'jux-theme-toggle-select';
+            select.setAttribute('aria-label', 'Select theme');
+            themes.forEach(t => {
+                const option = document.createElement('option');
+                option.value = t.id;
+                option.textContent = showLabel
+                    ? `${t.icon || ''} ${t.label}`.trim()
+                    : t.icon || t.label;
+                if (t.id === currentTheme) {
+                    option.selected = true;
+                }
+                select.appendChild(option);
+            });
+            select.addEventListener('change', (e) => {
+                const target = e.target;
+                this.setTheme(target.value);
+            });
+            wrapper.appendChild(select);
+        }
+        this._wireStandardEvents(wrapper);
+        container.appendChild(wrapper);
+        requestAnimationFrame(() => {
+            if (window.Iconify) {
+                window.Iconify.scan();
+            }
+        });
+        return this;
+    }
+}
+export function themeToggle(id, options = {}) {
+    return new ThemeToggle(id, options);
+}

package/lib/components/theme-toggle.ts

@@ -0,0 +1,293 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['themeChange'] as const;
+
+export interface Theme {
+    id: string;
+    label: string;
+    icon?: string;
+    iconCollection?: string;
+}
+
+export interface ThemeToggleOptions {
+    themes?: Theme[];
+    defaultTheme?: string;
+    storageKey?: string;
+    showLabel?: boolean;
+    variant?: 'button' | 'dropdown' | 'cycle';
+    style?: string;
+    class?: string;
+}
+
+type ThemeToggleState = {
+    themes: Theme[];
+    currentTheme: string;
+    storageKey: string;
+    showLabel: boolean;
+    variant: string;
+    style: string;
+    class: string;
+};
+
+export class ThemeToggle extends BaseComponent<ThemeToggleState> {
+    constructor(id: string, options: ThemeToggleOptions = {}) {
+        const defaultThemes: Theme[] = [
+            { id: 'light', label: 'Light', icon: '☀️' },
+            { id: 'dark', label: 'Dark', icon: '🌙' }
+        ];
+
+        super(id, {
+            themes: options.themes ?? defaultThemes,
+            currentTheme: options.defaultTheme ?? ThemeToggle.detectTheme(options.storageKey),
+            storageKey: options.storageKey ?? 'jux-theme',
+            showLabel: options.showLabel ?? false,
+            variant: options.variant ?? 'button',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+
+        // Apply theme on initialization
+        this.applyTheme(this.state.currentTheme);
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * STATIC METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private static detectTheme(storageKey = 'jux-theme'): string {
+        if (typeof window === 'undefined') return 'light';
+
+        const stored = localStorage.getItem(storageKey);
+        if (stored) return stored;
+
+        const current = document.body.getAttribute('data-theme');
+        if (current) return current;
+
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+
+        return 'light';
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent
+
+    themes(value: Theme[]): this {
+        this.state.themes = value;
+        return this;
+    }
+
+    variant(value: 'button' | 'dropdown' | 'cycle'): this {
+        this.state.variant = value;
+        return this;
+    }
+
+    showLabel(value: boolean): this {
+        this.state.showLabel = value;
+        return this;
+    }
+
+    setTheme(themeId: string): this {
+        const theme = this.state.themes.find(t => t.id === themeId);
+
+        if (!theme) {
+            console.warn(`Theme "${themeId}" not found in available themes`);
+            return this;
+        }
+
+        this.state.currentTheme = themeId;
+        this.applyTheme(themeId);
+        this._updateDOM();
+
+        return this;
+    }
+
+    getTheme(): string {
+        return this.state.currentTheme;
+    }
+
+    addTheme(theme: Theme): this {
+        if (!this.state.themes.find(t => t.id === theme.id)) {
+            this.state.themes.push(theme);
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private applyTheme(themeId: string): void {
+        if (typeof document === 'undefined') return;
+
+        try {
+            document.body.setAttribute('data-theme', themeId);
+            document.documentElement.setAttribute('data-theme', themeId);
+            localStorage.setItem(this.state.storageKey, themeId);
+
+            window.dispatchEvent(new CustomEvent('themechange', {
+                detail: { theme: themeId }
+            }));
+
+            // 🎯 Fire the themeChange callback event
+            this._triggerCallback('themeChange', themeId);
+
+            console.log(`🎨 Theme applied: ${themeId}`);
+        } catch (error: any) {
+            throw new Error(`Failed to apply theme "${themeId}": ${error.message}`);
+        }
+    }
+
+    private cycleTheme(): void {
+        const currentIndex = this.state.themes.findIndex(t => t.id === this.state.currentTheme);
+        const nextIndex = (currentIndex + 1) % this.state.themes.length;
+        const nextTheme = this.state.themes[nextIndex];
+
+        this.setTheme(nextTheme.id);
+    }
+
+    private _updateDOM(): void {
+        if (!this.container) return;
+
+        const toggle = this.container.querySelector(`#${this._id}`);
+        if (!toggle) return;
+
+        const currentTheme = this.state.themes.find(t => t.id === this.state.currentTheme);
+        if (!currentTheme) return;
+
+        if (this.state.variant === 'button' || this.state.variant === 'cycle') {
+            const button = toggle.querySelector('button');
+            if (button && currentTheme.icon) {
+                button.innerHTML = '';
+                const iconElement = renderIcon(currentTheme.icon, currentTheme.iconCollection);
+                button.appendChild(iconElement);
+
+                if (this.state.showLabel) {
+                    const labelSpan = document.createElement('span');
+                    labelSpan.textContent = ` ${currentTheme.label}`;
+                    button.appendChild(labelSpan);
+                }
+
+                requestAnimationFrame(() => {
+                    if ((window as any).Iconify) {
+                        (window as any).Iconify.scan();
+                    }
+                });
+            }
+        }
+
+        if (this.state.variant === 'dropdown') {
+            const select = toggle.querySelector('select') as HTMLSelectElement;
+            if (select) {
+                select.value = this.state.currentTheme;
+            }
+        }
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { themes, currentTheme, showLabel, variant, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = `jux-theme-toggle`;
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        const theme = themes.find(t => t.id === currentTheme);
+
+        if (variant === 'button' || variant === 'cycle') {
+            const button = document.createElement('button');
+            button.className = 'jux-theme-toggle-button';
+            button.type = 'button';
+            button.setAttribute('aria-label', 'Toggle theme');
+
+            if (theme?.icon) {
+                const iconElement = renderIcon(theme.icon, theme.iconCollection);
+                button.appendChild(iconElement);
+            }
+
+            if (showLabel) {
+                const labelSpan = document.createElement('span');
+                labelSpan.textContent = ` ${theme?.label || currentTheme}`;
+                button.appendChild(labelSpan);
+            } else if (!theme?.icon) {
+                button.textContent = theme?.label || currentTheme;
+            }
+
+            button.addEventListener('click', () => {
+                this.cycleTheme();
+            });
+
+            wrapper.appendChild(button);
+
+        } else if (variant === 'dropdown') {
+            const select = document.createElement('select');
+            select.className = 'jux-theme-toggle-select';
+            select.setAttribute('aria-label', 'Select theme');
+
+            themes.forEach(t => {
+                const option = document.createElement('option');
+                option.value = t.id;
+                option.textContent = showLabel
+                    ? `${t.icon || ''} ${t.label}`.trim()
+                    : t.icon || t.label;
+
+                if (t.id === currentTheme) {
+                    option.selected = true;
+                }
+
+                select.appendChild(option);
+            });
+
+            select.addEventListener('change', (e) => {
+                const target = e.target as HTMLSelectElement;
+                this.setTheme(target.value);
+            });
+
+            wrapper.appendChild(select);
+        }
+
+        this._wireStandardEvents(wrapper);
+
+        container.appendChild(wrapper);
+
+        requestAnimationFrame(() => {
+            if ((window as any).Iconify) {
+                (window as any).Iconify.scan();
+            }
+        });
+
+        return this;
+    }
+}
+
+export function themeToggle(id: string, options: ThemeToggleOptions = {}): ThemeToggle {
+    return new ThemeToggle(id, options);
+}

package/lib/components/tooltip.d.ts

@@ -0,0 +1,30 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface TooltipOptions {
+    text?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    style?: string;
+    class?: string;
+}
+type TooltipState = {
+    text: string;
+    position: string;
+    style: string;
+    class: string;
+};
+export declare class Tooltip extends BaseComponent<TooltipState> {
+    private _tooltip;
+    private _target;
+    constructor(id: string, options?: TooltipOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    text(value: string): this;
+    position(value: 'top' | 'bottom' | 'left' | 'right'): this;
+    attachTo(target: HTMLElement | null): this;
+    private _setupTooltip;
+    private _show;
+    private _hide;
+    render(targetId?: string): this;
+}
+export declare function tooltip(id: string, options?: TooltipOptions): Tooltip;
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/lib/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,cAAc;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,YAAY,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,OAAQ,SAAQ,aAAa,CAAC,YAAY,CAAC;IACpD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,OAAO,CAA4B;gBAE/B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB;IASpD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI;IAK1D,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IAY1C,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,KAAK;IAiCb,OAAO,CAAC,KAAK;IAMb,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAKlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAEzE"}

package/lib/components/tooltip.js

@@ -0,0 +1,109 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = [];
+export class Tooltip extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            text: options.text ?? '',
+            position: options.position ?? 'top',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._tooltip = null;
+        this._target = null;
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    text(value) {
+        this.state.text = value;
+        return this;
+    }
+    position(value) {
+        this.state.position = value;
+        return this;
+    }
+    attachTo(target) {
+        if (!target)
+            return this;
+        this._target = target;
+        this._setupTooltip();
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    _setupTooltip() {
+        if (!this._target)
+            return;
+        const { text, position, style, class: className } = this.state;
+        // Create tooltip element
+        const tooltip = document.createElement('div');
+        tooltip.className = `jux-tooltip jux-tooltip-${position}`;
+        tooltip.id = this._id;
+        if (className)
+            tooltip.className += ` ${className}`;
+        if (style)
+            tooltip.setAttribute('style', style);
+        tooltip.textContent = text;
+        tooltip.style.display = 'none';
+        this._tooltip = tooltip;
+        document.body.appendChild(tooltip);
+        // Show on hover
+        this._target.addEventListener('mouseenter', () => {
+            this._show();
+        });
+        this._target.addEventListener('mouseleave', () => {
+            this._hide();
+        });
+    }
+    _show() {
+        if (!this._tooltip || !this._target)
+            return;
+        const targetRect = this._target.getBoundingClientRect();
+        const tooltipRect = this._tooltip.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        switch (this.state.position) {
+            case 'top':
+                top = targetRect.top - tooltipRect.height - 8;
+                left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = targetRect.bottom + 8;
+                left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = targetRect.top + (targetRect.height - tooltipRect.height) / 2;
+                left = targetRect.left - tooltipRect.width - 8;
+                break;
+            case 'right':
+                top = targetRect.top + (targetRect.height - tooltipRect.height) / 2;
+                left = targetRect.right + 8;
+                break;
+        }
+        this._tooltip.style.top = `${top}px`;
+        this._tooltip.style.left = `${left}px`;
+        this._tooltip.style.display = 'block';
+    }
+    _hide() {
+        if (this._tooltip) {
+            this._tooltip.style.display = 'none';
+        }
+    }
+    render(targetId) {
+        // Tooltips don't render to containers, they attach to targets
+        console.warn('Tooltip: Use .attachTo(element) instead of .render()');
+        return this;
+    }
+}
+export function tooltip(id, options = {}) {
+    return new Tooltip(id, options);
+}