juxscript 1.1.4 → 1.1.6

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,CAgC5D"}

package/lib/components/helpers.js

@@ -0,0 +1,30 @@
+/**
+ * Component helper utilities
+ */
+/**
+ * Get or create a container element for a component
+ * Auto-creates if it doesn't exist and appends to appropriate parent
+ */
+export function getOrCreateContainer(id) {
+    if (typeof document === 'undefined') {
+        throw new Error('Document is not available');
+    }
+    let container = document.getElementById(id);
+    // Container already exists, return it
+    if (container) {
+        return container;
+    }
+    // Auto-create container if it doesn't exist
+    container = document.createElement('div');
+    container.id = id;
+    // Find appropriate parent - [data-jux-page] takes precedence, then #app, then body
+    const dataJuxPage = document.querySelector('[data-jux-page]');
+    const app = document.getElementById('app');
+    const parent = (dataJuxPage || app || document.body);
+    // Log warning if falling back to body
+    if (!dataJuxPage && !app) {
+        console.warn(`[Jux] Preferred container targets "[data-jux-page]" or "#app" not found. Creating container "#${id}" in fallback parent: body`);
+    }
+    parent.appendChild(container);
+    return container;
+}

package/lib/components/helpers.ts

@@ -0,0 +1,41 @@
+/**
+ * Component helper utilities
+ */
+
+/**
+ * Get or create a container element for a component
+ * Auto-creates if it doesn't exist and appends to appropriate parent
+ */
+export function getOrCreateContainer(id: string): HTMLElement {
+    if (typeof document === 'undefined') {
+        throw new Error('Document is not available');
+    }
+
+    let container = document.getElementById(id);
+
+    // Container already exists, return it
+    if (container) {
+        return container;
+    }
+
+    // Auto-create container if it doesn't exist
+    container = document.createElement('div');
+    container.id = id;
+
+    // Find appropriate parent - [data-jux-page] takes precedence, then #app, then body
+    const dataJuxPage = document.querySelector('[data-jux-page]') as HTMLElement;
+    const app = document.getElementById('app');
+
+    const parent: HTMLElement = (dataJuxPage || app || document.body) as HTMLElement;
+
+    // Log warning if falling back to body
+    if (!dataJuxPage && !app) {
+        console.warn(
+            `[Jux] Preferred container targets "[data-jux-page]" or "#app" not found. Creating container "#${id}" in fallback parent: body`,
+        );
+    }
+
+    parent.appendChild(container);
+
+    return container;
+}

package/lib/components/hero.d.ts

@@ -0,0 +1,45 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface HeroOptions {
+    title?: string;
+    subtitle?: string;
+    content?: string;
+    cta?: string;
+    ctaLink?: string;
+    backgroundImage?: string;
+    backgroundOverlay?: boolean;
+    variant?: 'default' | 'centered' | 'split';
+    centered?: boolean;
+    style?: string;
+    class?: string;
+}
+type HeroState = {
+    title: string;
+    subtitle: string;
+    content: string;
+    cta: string;
+    ctaLink: string;
+    backgroundImage: string;
+    backgroundOverlay: boolean;
+    variant: string;
+    centered: boolean;
+    style: string;
+    class: string;
+};
+export declare class Hero extends BaseComponent<HeroState> {
+    constructor(id: string, options?: HeroOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    title(value: string): this;
+    subtitle(value: string): this;
+    content(value: string): this;
+    cta(value: string): this;
+    ctaLink(value: string): this;
+    backgroundImage(value: string): this;
+    backgroundOverlay(value: boolean): this;
+    variant(value: string): this;
+    centered(value: boolean): this;
+    render(targetId?: string): this;
+}
+export declare function hero(id: string, options?: HeroOptions): Hero;
+export {};
+//# sourceMappingURL=hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAgBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKpC,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CA2GhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/hero.js

@@ -0,0 +1,165 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions - Hero is display-only, but CTA button can trigger actions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['ctaClick']; // ✅ When CTA button is clicked
+export class Hero extends BaseComponent {
+    constructor(id, options = {}) {
+        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 ?? ''
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    title(value) {
+        this.state.title = value;
+        return this;
+    }
+    subtitle(value) {
+        this.state.subtitle = value;
+        return this;
+    }
+    content(value) {
+        this.state.content = value;
+        return this;
+    }
+    cta(value) {
+        this.state.cta = value;
+        return this;
+    }
+    ctaLink(value) {
+        this.state.ctaLink = value;
+        return this;
+    }
+    backgroundImage(value) {
+        this.state.backgroundImage = value;
+        return this;
+    }
+    backgroundOverlay(value) {
+        this.state.backgroundOverlay = value;
+        return this;
+    }
+    variant(value) {
+        this.state.variant = value;
+        return this;
+    }
+    centered(value) {
+        this.state.centered = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        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) => String(v));
+                stateObj.subscribe((val) => {
+                    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) => String(v));
+                stateObj.subscribe((val) => {
+                    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) => String(v));
+                stateObj.subscribe((val) => {
+                    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, options = {}) {
+    return new Hero(id, options);
+}

package/lib/components/hero.ts

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

@@ -0,0 +1,35 @@
+import { BaseComponent } from './base/BaseComponent.js';
+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 declare class Icon extends BaseComponent<IconState> {
+    constructor(id: string, options?: IconOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    value(value: string): this;
+    size(value: string): this;
+    color(value: string): this;
+    useEmoji(value: boolean): this;
+    iconCollection(value: string): this;
+    style(value: string): this;
+    class(value: string): this;
+    render(targetId?: string): this;
+}
+export declare function icon(id: string, options: IconOptions): Icon;
+export {};
+//# sourceMappingURL=icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,SAAS,GAAG;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBAClC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAYjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKnC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS1B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAgFlC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAE3D"}

package/lib/components/icon.js

@@ -0,0 +1,132 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon, renderEmoji } from './icons.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = [];
+export class Icon extends BaseComponent {
+    constructor(id, options = {}) {
+        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 ?? ''
+        });
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent
+    value(value) {
+        this.state.value = value;
+        return this;
+    }
+    size(value) {
+        this.state.size = value;
+        return this;
+    }
+    color(value) {
+        this.state.color = value;
+        return this;
+    }
+    useEmoji(value) {
+        this.state.useEmoji = value;
+        return this;
+    }
+    iconCollection(value) {
+        this.state.iconCollection = value;
+        return this;
+    }
+    style(value) {
+        this.state.style = value;
+        return this;
+    }
+    class(value) {
+        this.state.class = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        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) => String(v));
+                stateObj.subscribe((val) => {
+                    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.Iconify) {
+                            window.Iconify.scan();
+                        }
+                    });
+                });
+            }
+            else if (property === 'size') {
+                const transform = toComponent || ((v) => String(v));
+                stateObj.subscribe((val) => {
+                    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) => String(v));
+                stateObj.subscribe((val) => {
+                    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.lucide) {
+                window.lucide.createIcons();
+            }
+        });
+        return this;
+    }
+}
+export function icon(id, options) {
+    return new Icon(id, options);
+}