juxscript 1.1.2 → 1.1.4

package/lib/components/tabs.ts

@@ -1,250 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['tabChange'] as const;
-
-export interface Tab {
-  id: string;
-  label: string;
-  content: string | HTMLElement;
-  icon?: string;
-}
-
-export interface TabsOptions {
-  tabs?: Tab[];
-  activeTab?: string;
-  variant?: 'default' | 'pills' | 'underline';
-  style?: string;
-  class?: string;
-}
-
-type TabsState = {
-  tabs: Tab[];
-  activeTab: string;
-  variant: string;
-  style: string;
-  class: string;
-};
-
-export class Tabs extends BaseComponent<TabsState> {
-  constructor(id: string, options: TabsOptions = {}) {
-    super(id, {
-      tabs: options.tabs ?? [],
-      activeTab: options.activeTab ?? (options.tabs?.[0]?.id ?? ''),
-      variant: options.variant ?? 'default',
-      style: options.style ?? '',
-      class: options.class ?? ''
-    });
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
-
-  // ✅ Inherited from BaseComponent
-
-  tabs(value: Tab[]): this {
-    this.state.tabs = value;
-    return this;
-  }
-
-  addTab(tab: Tab): this {
-    this.state.tabs = [...this.state.tabs, tab];
-    return this;
-  }
-
-  activeTab(value: string): this {
-    this.state.activeTab = value;
-    this._updateActiveTab();
-    return this;
-  }
-
-  variant(value: 'default' | 'pills' | 'underline'): this {
-    this.state.variant = value;
-    return this;
-  }
-
-  private _updateActiveTab(): void {
-    if (!this.container) return;
-    const wrapper = this.container.querySelector(`#${this._id}`);
-    if (!wrapper) return;
-
-    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
-      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === this.state.activeTab);
-    });
-
-    wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
-      const isActive = panel.getAttribute('data-tab') === this.state.activeTab;
-      panel.classList.toggle('jux-tabs-panel-active', isActive);
-      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
-    });
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string): this {
-    const container = this._setupContainer(targetId);
-
-    const { tabs, activeTab, variant, style, class: className } = this.state;
-    const hasActiveTabSync = this._syncBindings.some(b => b.property === 'activeTab');
-
-    const wrapper = document.createElement('div');
-    wrapper.className = `jux-tabs jux-tabs-${variant}`;
-    wrapper.id = this._id;
-    if (className) wrapper.className += ` ${className}`;
-    if (style) wrapper.setAttribute('style', style);
-
-    const tabList = document.createElement('div');
-    tabList.className = 'jux-tabs-list';
-
-    const tabPanels = document.createElement('div');
-    tabPanels.className = 'jux-tabs-panels';
-
-    tabs.forEach(tab => {
-      const tabButton = document.createElement('button');
-      tabButton.className = 'jux-tabs-button';
-      tabButton.setAttribute('data-tab', tab.id);
-      if (tab.id === activeTab) tabButton.classList.add('jux-tabs-button-active');
-      tabButton.textContent = tab.label;
-      tabList.appendChild(tabButton);
-
-      const tabPanel = document.createElement('div');
-      tabPanel.className = 'jux-tabs-panel';
-      tabPanel.setAttribute('data-tab', tab.id);
-      if (tab.id === activeTab) {
-        tabPanel.classList.add('jux-tabs-panel-active');
-      } else {
-        tabPanel.style.display = 'none';
-      }
-      if (typeof tab.content === 'string') {
-        tabPanel.innerHTML = tab.content;
-      } else {
-        tabPanel.appendChild(tab.content);
-      }
-      tabPanels.appendChild(tabPanel);
-    });
-
-    wrapper.appendChild(tabList);
-    wrapper.appendChild(tabPanels);
-
-    if (!hasActiveTabSync) {
-      tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
-        button.addEventListener('click', () => {
-          const tabId = button.getAttribute('data-tab')!;
-          this.state.activeTab = tabId;
-          this._switchTab(tabId, wrapper);
-        });
-      });
-    }
-
-    this._wireStandardEvents(wrapper);
-
-    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-      if (property === 'activeTab') {
-        const transformToState = toState || ((v: any) => String(v));
-        const transformToComponent = toComponent || ((v: any) => String(v));
-
-        let isUpdating = false;
-
-        stateObj.subscribe((val: any) => {
-          if (isUpdating) return;
-          const transformed = transformToComponent(val);
-          this.state.activeTab = transformed;
-          this._switchTab(transformed, wrapper);
-        });
-
-        tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
-          button.addEventListener('click', () => {
-            if (isUpdating) return;
-            isUpdating = true;
-
-            const tabId = button.getAttribute('data-tab')!;
-            this.state.activeTab = tabId;
-            this._switchTab(tabId, wrapper);
-
-            const transformed = transformToState(tabId);
-            stateObj.set(transformed);
-
-            setTimeout(() => { isUpdating = false; }, 0);
-          });
-        });
-      }
-      else if (property === 'tabs') {
-        const transform = toComponent || ((v: any) => v);
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          this.state.tabs = transformed;
-
-          tabList.innerHTML = '';
-          tabPanels.innerHTML = '';
-
-          transformed.forEach((tab: any) => {
-            const tabButton = document.createElement('button');
-            tabButton.className = 'jux-tabs-button';
-            tabButton.setAttribute('data-tab', tab.id);
-            if (tab.id === this.state.activeTab) tabButton.classList.add('jux-tabs-button-active');
-            tabButton.textContent = tab.label;
-            tabList.appendChild(tabButton);
-
-            const tabPanel = document.createElement('div');
-            tabPanel.className = 'jux-tabs-panel';
-            tabPanel.setAttribute('data-tab', tab.id);
-            if (tab.id === this.state.activeTab) {
-              tabPanel.classList.add('jux-tabs-panel-active');
-            } else {
-              tabPanel.style.display = 'none';
-            }
-            if (typeof tab.content === 'string') {
-              tabPanel.innerHTML = tab.content;
-            } else {
-              tabPanel.appendChild(tab.content);
-            }
-            tabPanels.appendChild(tabPanel);
-          });
-
-          tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
-            button.addEventListener('click', () => {
-              const tabId = button.getAttribute('data-tab')!;
-              this.state.activeTab = tabId;
-              this._switchTab(tabId, wrapper);
-            });
-          });
-        });
-      }
-    });
-
-    container.appendChild(wrapper);
-    return this;
-  }
-
-  private _switchTab(tabId: string, wrapper: HTMLElement): void {
-    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
-      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === tabId);
-    });
-
-    wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
-      const isActive = panel.getAttribute('data-tab') === tabId;
-      panel.classList.toggle('jux-tabs-panel-active', isActive);
-      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
-    });
-
-    // 🎯 Fire the tabChange callback event
-    this._triggerCallback('tabChange', tabId);
-  }
-}
-
-export function tabs(id: string, options: TabsOptions = {}): Tabs {
-  return new Tabs(id, options);
-}

package/lib/components/theme-toggle.ts

@@ -1,293 +0,0 @@
-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.ts

@@ -1,144 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-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 class Tooltip extends BaseComponent<TooltipState> {
-    private _tooltip: HTMLElement | null = null;
-    private _target: HTMLElement | null = null;
-
-    constructor(id: string, options: TooltipOptions = {}) {
-        super(id, {
-            text: options.text ?? '',
-            position: options.position ?? 'top',
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    text(value: string): this {
-        this.state.text = value;
-        return this;
-    }
-
-    position(value: 'top' | 'bottom' | 'left' | 'right'): this {
-        this.state.position = value;
-        return this;
-    }
-
-    attachTo(target: HTMLElement | null): this {
-        if (!target) return this;
-
-        this._target = target;
-        this._setupTooltip();
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    private _setupTooltip(): void {
-        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();
-        });
-
-    }
-
-    private _show(): void {
-        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';
-    }
-
-    private _hide(): void {
-        if (this._tooltip) {
-            this._tooltip.style.display = 'none';
-        }
-    }
-
-    render(targetId?: string): this {
-        // 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: string, options: TooltipOptions = {}): Tooltip {
-    return new Tooltip(id, options);
-}