juxscript 1.1.2 → 1.1.4

package/lib/components/hero.ts

@@ -1,224 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-
-// Event definitions - Hero is display-only, but CTA button can trigger actions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['ctaClick'] as const;  // ✅ When CTA button is clicked
-
-export interface HeroOptions {
-  title?: string;
-  subtitle?: string;
-  content?: string;          // ✅ ADD: Generates jux-hero-body div
-  cta?: string;              // ✅ KEEP: Generates jux-hero-cta anchor
-  ctaLink?: string;
-  backgroundImage?: string;
-  backgroundOverlay?: boolean; // ✅ ADD: Generates jux-hero-overlay div
-  variant?: 'default' | 'centered' | 'split';
-  centered?: boolean;        // ✅ ADD: Affects container class
-  style?: string;
-  class?: string;
-}
-
-type HeroState = {
-  title: string;
-  subtitle: string;
-  content: string;           // ✅ ADD: For jux-hero-body
-  cta: string;
-  ctaLink: string;
-  backgroundImage: string;
-  backgroundOverlay: boolean; // ✅ ADD: For overlay div
-  variant: string;
-  centered: boolean;         // ✅ ADD: For layout variant
-  style: string;
-  class: string;
-};
-
-export class Hero extends BaseComponent<HeroState> {
-  constructor(id: string, options: HeroOptions = {}) {
-    super(id, {
-      title: options.title ?? '',
-      subtitle: options.subtitle ?? '',
-      content: options.content ?? '',           // ✅ ADD
-      cta: options.cta ?? '',
-      ctaLink: options.ctaLink ?? '#',
-      backgroundImage: options.backgroundImage ?? '',
-      backgroundOverlay: options.backgroundOverlay ?? false, // ✅ ADD
-      variant: options.variant ?? 'default',
-      centered: options.centered ?? false,     // ✅ ADD
-      style: options.style ?? '',
-      class: options.class ?? ''
-    });
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
-
-  title(value: string): this {
-    this.state.title = value;
-    return this;
-  }
-
-  subtitle(value: string): this {
-    this.state.subtitle = value;
-    return this;
-  }
-
-  content(value: string): this {     // ✅ ADD: Fluent method for content
-    this.state.content = value;
-    return this;
-  }
-
-  cta(value: string): this {
-    this.state.cta = value;
-    return this;
-  }
-
-  ctaLink(value: string): this {
-    this.state.ctaLink = value;
-    return this;
-  }
-
-  backgroundImage(value: string): this {
-    this.state.backgroundImage = value;
-    return this;
-  }
-
-  backgroundOverlay(value: boolean): this { // ✅ ADD: Fluent method for overlay
-    this.state.backgroundOverlay = value;
-    return this;
-  }
-
-  variant(value: string): this {
-    this.state.variant = value;
-    return this;
-  }
-
-  centered(value: boolean): this {   // ✅ ADD: Fluent method for centered
-    this.state.centered = value;
-    return this;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string): this {
-    const container = this._setupContainer(targetId);
-
-    const { title, subtitle, content, backgroundImage, backgroundOverlay, centered, style, class: className } = this.state;
-
-    const hero = document.createElement('section');
-    hero.className = 'jux-hero';
-    hero.id = this._id;
-    if (centered) hero.classList.add('jux-hero-centered');
-    if (className) hero.className += ` ${className}`;
-    if (style) hero.setAttribute('style', style);
-
-    if (backgroundImage) {
-      hero.style.backgroundImage = `url(${backgroundImage})`;
-      if (backgroundOverlay) {
-        const overlay = document.createElement('div');
-        overlay.className = 'jux-hero-overlay';
-        hero.appendChild(overlay);
-      }
-    }
-
-    const contentContainer = document.createElement('div');
-    contentContainer.className = 'jux-hero-content';
-
-    if (title) {
-      const titleEl = document.createElement('h1');
-      titleEl.className = 'jux-hero-title';
-      titleEl.id = `${this._id}-title`;
-      titleEl.textContent = title;
-      contentContainer.appendChild(titleEl);
-    }
-
-    if (subtitle) {
-      const subtitleEl = document.createElement('p');
-      subtitleEl.className = 'jux-hero-subtitle';
-      subtitleEl.id = `${this._id}-subtitle`;
-      subtitleEl.textContent = subtitle;
-      contentContainer.appendChild(subtitleEl);
-    }
-
-    if (content) {
-      const contentEl = document.createElement('div');
-      contentEl.className = 'jux-hero-body';
-      contentEl.innerHTML = content;
-      contentContainer.appendChild(contentEl);
-    }
-
-    if (this.state.cta) {
-      const ctaButton = document.createElement('a');
-      ctaButton.className = 'jux-hero-cta';
-      ctaButton.href = this.state.ctaLink;
-      ctaButton.textContent = this.state.cta;
-
-      // ✅ Fire callback when CTA is clicked
-      ctaButton.addEventListener('click', (e) => {
-        this._triggerCallback('ctaClick', e);
-      });
-
-      contentContainer.appendChild(ctaButton);
-    }
-
-    hero.appendChild(contentContainer);
-
-    this._wireStandardEvents(hero);
-
-    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-      if (property === 'title') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          const titleEl = document.getElementById(`${this._id}-title`);
-          if (titleEl) {
-            titleEl.textContent = transformed;
-          }
-          this.state.title = transformed;
-        });
-      }
-      else if (property === 'subtitle') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          const subtitleEl = document.getElementById(`${this._id}-subtitle`);
-          if (subtitleEl) {
-            subtitleEl.textContent = transformed;
-          }
-          this.state.subtitle = transformed;
-        });
-      }
-      else if (property === 'content') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          const contentEl = hero.querySelector('.jux-hero-body');
-          if (contentEl) {
-            contentEl.innerHTML = transformed;
-          }
-          this.state.content = transformed;
-        });
-      }
-    });
-
-    container.appendChild(hero);
-    return this;
-  }
-}
-
-export function hero(id: string, options: HeroOptions = {}): Hero {
-  return new Hero(id, options);
-}

package/lib/components/icon.ts

@@ -1,178 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon, renderEmoji } from './icons.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-export interface IconOptions {
-    value?: string;
-    size?: string;
-    color?: string;
-    useEmoji?: boolean;
-    iconCollection?: string;
-    style?: string;
-    class?: string;
-}
-
-type IconState = {
-    value: string;
-    size: string;
-    color: string;
-    useEmoji: boolean;
-    iconCollection: string;
-    style: string;
-    class: string;
-};
-
-export class Icon extends BaseComponent<IconState> {
-    constructor(id: string, options: IconOptions = {}) {
-        super(id, {
-            value: options.value ?? '',
-            size: options.size ?? '24px',
-            color: options.color ?? '',
-            useEmoji: options.useEmoji ?? false,
-            iconCollection: options.iconCollection ?? '',
-            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
-
-    value(value: string): this {
-        this.state.value = value;
-        return this;
-    }
-
-    size(value: string): this {
-        this.state.size = value;
-        return this;
-    }
-
-    color(value: string): this {
-        this.state.color = value;
-        return this;
-    }
-
-    useEmoji(value: boolean): this {
-        this.state.useEmoji = value;
-        return this;
-    }
-
-    iconCollection(value: string): this {
-        this.state.iconCollection = value;
-        return this;
-    }
-
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string): this {
-        const container = this._setupContainer(targetId);
-
-        const { value, size, color, useEmoji, iconCollection, style, class: className } = this.state;
-
-        const wrapper = document.createElement('span');
-        wrapper.className = 'jux-icon';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        const iconElement = useEmoji ? renderEmoji(value) : renderIcon(value, iconCollection);
-        iconElement.style.width = size;
-        iconElement.style.height = size;
-        if (color) iconElement.style.color = color;
-
-        wrapper.appendChild(iconElement);
-
-        this._wireStandardEvents(wrapper);
-
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'value') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    this.state.value = transformed;
-
-                    wrapper.innerHTML = '';
-                    const newIcon = this.state.useEmoji ? renderEmoji(transformed) : renderIcon(transformed, this.state.iconCollection);
-                    newIcon.style.width = this.state.size;
-                    newIcon.style.height = this.state.size;
-                    if (this.state.color) newIcon.style.color = this.state.color;
-                    wrapper.appendChild(newIcon);
-
-                    requestAnimationFrame(() => {
-                        if ((window as any).Iconify) {
-                            (window as any).Iconify.scan();
-                        }
-                    });
-                });
-            }
-            else if (property === 'size') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    const icon = wrapper.querySelector('img, svg, span');
-                    if (icon instanceof HTMLElement) {
-                        icon.style.width = transformed;
-                        icon.style.height = transformed;
-                    }
-                    this.state.size = transformed;
-                });
-            }
-            else if (property === 'color') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    const icon = wrapper.querySelector('img, svg, span');
-                    if (icon instanceof HTMLElement) {
-                        icon.style.color = transformed;
-                    }
-                    this.state.color = transformed;
-                });
-            }
-        });
-
-        container.appendChild(wrapper);
-
-        requestAnimationFrame(() => {
-            if ((window as any).lucide) {
-                (window as any).lucide.createIcons();
-            }
-        });
-
-        return this;
-    }
-}
-
-export function icon(id: string, options: IconOptions): Icon {
-    return new Icon(id, options);
-}