juxscript 1.1.240 → 1.1.244

package/lib/components/stack/HStack.js

@@ -1,22 +0,0 @@
-import { BaseStack } from './BaseStack.js';
-export class HStack extends BaseStack {
-    // ✅ ULTRA-MINIMAL: Only id
-    constructor(id) {
-        super(id);
-        this.baseClassName = 'jux-hstack';
-    }
-}
-/**
- * Create a horizontal stack (auto-renders)
- *
- * @example
- * hstack('nav')
- *   .items([
- *     jux.link('home').text('Home'),
- *     jux.link('about').text('About')
- *   ])
- *   .spacing('tight');
- */
-export function hstack(id) {
-    return new HStack(id);
-}

package/lib/components/stack/HStack.ts

@@ -1,25 +0,0 @@
-import { BaseStack } from './BaseStack.js';
-
-export class HStack extends BaseStack {
-    protected baseClassName = 'jux-hstack';
-
-    // ✅ ULTRA-MINIMAL: Only id
-    constructor(id: string) {
-        super(id);
-    }
-}
-
-/**
- * Create a horizontal stack (auto-renders)
- *
- * @example
- * hstack('nav')
- *   .items([
- *     jux.link('home').text('Home'),
- *     jux.link('about').text('About')
- *   ])
- *   .spacing('tight');
- */
-export function hstack(id: string): HStack {
-    return new HStack(id);
-}

package/lib/components/stack/VStack.d.ts

@@ -1,19 +0,0 @@
-import { BaseStack } from './BaseStack.js';
-export declare class VStack extends BaseStack {
-    protected baseClassName: string;
-    constructor(id: string);
-}
-/**
- * Create a vertical stack (auto-renders)
- *
- * @example
- * vstack('my-stack')
- *   .items([
- *     jux.heading('title').content('Hello'),
- *     jux.paragraph('text').text('World')
- *   ])
- *   .spacing('loose')
- *   .align('center');
- */
-export declare function vstack(id: string): VStack;
-//# sourceMappingURL=VStack.d.ts.map

package/lib/components/stack/VStack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["VStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,qBAAa,MAAO,SAAQ,SAAS;IACjC,SAAS,CAAC,aAAa,SAAgB;gBAG3B,EAAE,EAAE,MAAM;CAGzB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEzC"}

package/lib/components/stack/VStack.js

@@ -1,23 +0,0 @@
-import { BaseStack } from './BaseStack.js';
-export class VStack extends BaseStack {
-    // ✅ ULTRA-MINIMAL: Only id
-    constructor(id) {
-        super(id);
-        this.baseClassName = 'jux-vstack';
-    }
-}
-/**
- * Create a vertical stack (auto-renders)
- *
- * @example
- * vstack('my-stack')
- *   .items([
- *     jux.heading('title').content('Hello'),
- *     jux.paragraph('text').text('World')
- *   ])
- *   .spacing('loose')
- *   .align('center');
- */
-export function vstack(id) {
-    return new VStack(id);
-}

package/lib/components/stack/VStack.ts

@@ -1,26 +0,0 @@
-import { BaseStack } from './BaseStack.js';
-
-export class VStack extends BaseStack {
-    protected baseClassName = 'jux-vstack';
-
-    // ✅ ULTRA-MINIMAL: Only id
-    constructor(id: string) {
-        super(id);
-    }
-}
-
-/**
- * Create a vertical stack (auto-renders)
- *
- * @example
- * vstack('my-stack')
- *   .items([
- *     jux.heading('title').content('Hello'),
- *     jux.paragraph('text').text('World')
- *   ])
- *   .spacing('loose')
- *   .align('center');
- */
-export function vstack(id: string): VStack {
-    return new VStack(id);
-}

package/lib/components/stack/ZStack.d.ts

@@ -1,18 +0,0 @@
-import { BaseStack } from './BaseStack.js';
-export declare class ZStack extends BaseStack {
-    protected baseClassName: string;
-    constructor(id: string);
-}
-/**
- * Create a Z-stack (layered, auto-renders)
- *
- * @example
- * zstack('hero')
- *   .items([
- *     jux.image('bg', { src: '/hero.jpg' }),
- *     jux.overlay('dark', 0.4),
- *     jux.heading('title').content('Welcome')
- *   ]);
- */
-export declare function zstack(id: string): ZStack;
-//# sourceMappingURL=ZStack.d.ts.map

package/lib/components/stack/ZStack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ZStack.d.ts","sourceRoot":"","sources":["ZStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,qBAAa,MAAO,SAAQ,SAAS;IACjC,SAAS,CAAC,aAAa,SAAgB;gBAG3B,EAAE,EAAE,MAAM;CAGzB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEzC"}

package/lib/components/stack/ZStack.js

@@ -1,22 +0,0 @@
-import { BaseStack } from './BaseStack.js';
-export class ZStack extends BaseStack {
-    // ✅ ULTRA-MINIMAL: Only id
-    constructor(id) {
-        super(id);
-        this.baseClassName = 'jux-zstack';
-    }
-}
-/**
- * Create a Z-stack (layered, auto-renders)
- *
- * @example
- * zstack('hero')
- *   .items([
- *     jux.image('bg', { src: '/hero.jpg' }),
- *     jux.overlay('dark', 0.4),
- *     jux.heading('title').content('Welcome')
- *   ]);
- */
-export function zstack(id) {
-    return new ZStack(id);
-}

package/lib/components/stack/ZStack.ts

@@ -1,25 +0,0 @@
-import { BaseStack } from './BaseStack.js';
-
-export class ZStack extends BaseStack {
-    protected baseClassName = 'jux-zstack';
-
-    // ✅ ULTRA-MINIMAL: Only id
-    constructor(id: string) {
-        super(id);
-    }
-}
-
-/**
- * Create a Z-stack (layered, auto-renders)
- *
- * @example
- * zstack('hero')
- *   .items([
- *     jux.image('bg', { src: '/hero.jpg' }),
- *     jux.overlay('dark', 0.4),
- *     jux.heading('title').content('Welcome')
- *   ]);
- */
-export function zstack(id: string): ZStack {
-    return new ZStack(id);
-}

package/lib/components/style.d.ts

@@ -1,14 +0,0 @@
-/**
- * Style - Inject inline CSS into the document
- * For external stylesheets, use Import component instead
- * Auto-renders when created or modified
- */
-export declare class Style {
-    private _id;
-    private css;
-    constructor(css: string, id?: string);
-    render(): this;
-    remove(): void;
-}
-export declare function style(css: string, id?: string): Style;
-//# sourceMappingURL=style.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qBAAa,KAAK;IAChB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,GAAG,CAAS;gBAER,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM;IAMpC,MAAM,IAAI,IAAI;IAcd,MAAM,IAAI,IAAI;CAMf;AAGD,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAErD"}

package/lib/components/style.js

@@ -1,33 +0,0 @@
-/**
- * Style - Inject inline CSS into the document
- * For external stylesheets, use Import component instead
- * Auto-renders when created or modified
- */
-export class Style {
-    constructor(css, id) {
-        // ID only for deduplication, auto-generate if not provided
-        this._id = id || `jux-style-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        this.css = css;
-    }
-    render() {
-        // Check if style with this ID already exists
-        if (document.getElementById(this._id)) {
-            return this;
-        }
-        const style = document.createElement('style');
-        style.id = this._id;
-        style.textContent = this.css;
-        document.head.appendChild(style);
-        return this;
-    }
-    remove() {
-        const existing = document.getElementById(this._id);
-        if (existing) {
-            existing.remove();
-        }
-    }
-}
-// ✅ ID is optional
-export function style(css, id) {
-    return new Style(css, id);
-}

package/lib/components/style.ts

@@ -1,41 +0,0 @@
-/**
- * Style - Inject inline CSS into the document
- * For external stylesheets, use Import component instead
- * Auto-renders when created or modified
- */
-export class Style {
-  private _id: string;
-  private css: string;
-
-  constructor(css: string, id?: string) {
-    // ID only for deduplication, auto-generate if not provided
-    this._id = id || `jux-style-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    this.css = css;
-  }
-
-  render(): this {
-    // Check if style with this ID already exists
-    if (document.getElementById(this._id)) {
-      return this;
-    }
-
-    const style = document.createElement('style');
-    style.id = this._id;
-    style.textContent = this.css;
-    document.head.appendChild(style);
-
-    return this;
-  }
-
-  remove(): void {
-    const existing = document.getElementById(this._id);
-    if (existing) {
-      existing.remove();
-    }
-  }
-}
-
-// ✅ ID is optional
-export function style(css: string, id?: string): Style {
-  return new Style(css, id);
-}

package/lib/components/switch.d.ts

@@ -1,34 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface SwitchOptions {
-    checked?: boolean;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    value?: string;
-    style?: string;
-    class?: string;
-    onValidate?: (checked: boolean) => boolean | string;
-}
-interface SwitchState extends BaseState {
-    checked: boolean;
-    value: string;
-}
-export declare class Switch extends BaseComponent<SwitchState> {
-    constructor(id: string, options?: SwitchOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    checked(value: boolean): this;
-    value(value: string): this;
-    toggle(): this;
-    getValue(): boolean;
-    setValue(value: boolean): this;
-    validate(): boolean;
-    protected _validateValue(checked: boolean): boolean | string;
-    protected _buildInputElement(): HTMLElement;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-    isValid(): boolean;
-}
-export declare function switchComponent(id: string, options?: SwitchOptions): Switch;
-export {};
-//# sourceMappingURL=switch.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOnE,MAAM,WAAW,aAAa;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,CAAC;CACvD;AAED,UAAU,WAAY,SAAQ,SAAS;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;gBACtC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAqBnD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI7B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,MAAM,IAAI,IAAI;IAQd,QAAQ,IAAI,OAAO;IAInB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAQ9B,QAAQ,IAAI,OAAO;IAenB,SAAS,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM;IAiB5D,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAoB3C,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAoHlE,OAAO,IAAI,OAAO;CAIrB;AAED,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAE/E"}

package/lib/components/switch.js

@@ -1,209 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-// Event definitions
-const TRIGGER_EVENTS = [];
-const CALLBACK_EVENTS = ['change'];
-export class Switch extends BaseComponent {
-    constructor(id, options = {}) {
-        super(id, {
-            visible: true,
-            disabled: options.disabled ?? false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
-            required: options.required ?? false,
-            name: options.name ?? id,
-            errorMessage: undefined,
-            checked: options.checked ?? false,
-            value: options.value ?? 'on'
-        });
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-    getTriggerEvents() {
-        return TRIGGER_EVENTS;
-    }
-    getCallbackEvents() {
-        return CALLBACK_EVENTS;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    // BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
-    checked(value) {
-        return this.setValue(value);
-    }
-    value(value) {
-        this.state.value = value;
-        return this;
-    }
-    toggle() {
-        return this.setValue(!this.state.checked);
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-    getValue() {
-        return this.state.checked;
-    }
-    setValue(value) {
-        this.state.checked = value;
-        if (this._inputElement) {
-            this._inputElement.checked = value;
-        }
-        return this;
-    }
-    validate() {
-        this._hasBeenValidated = true;
-        const checked = this.getValue();
-        const result = this._validateValue(checked);
-        if (result === true) {
-            this._clearError();
-            return true;
-        }
-        else {
-            this._showError(result);
-            return false;
-        }
-    }
-    _validateValue(checked) {
-        const { required } = this.state;
-        if (required && !checked) {
-            return 'This field must be enabled';
-        }
-        if (this._onValidate) {
-            const result = this._onValidate(checked);
-            if (result !== true) {
-                return result || 'Invalid value';
-            }
-        }
-        return true;
-    }
-    _buildInputElement() {
-        const { checked, value, required, disabled, name } = this.state;
-        const input = document.createElement('input');
-        input.type = 'checkbox';
-        input.className = 'jux-switch-input';
-        input.id = `${this._id}-input`;
-        input.name = name;
-        input.value = value;
-        input.checked = checked;
-        input.required = required;
-        input.disabled = disabled;
-        return input;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-    render(targetId) {
-        const container = this._setupContainer(targetId);
-        const { style, class: className } = this.state;
-        // Build wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-switch';
-        wrapper.id = this._id;
-        if (className)
-            wrapper.className += ` ${className}`;
-        if (style)
-            wrapper.setAttribute('style', style);
-        // Switch container
-        const switchContainer = document.createElement('label');
-        switchContainer.className = 'jux-switch-container';
-        switchContainer.htmlFor = `${this._id}-input`;
-        // Input element
-        const inputEl = this._buildInputElement();
-        this._inputElement = inputEl;
-        switchContainer.appendChild(inputEl);
-        // Toggle slider
-        const slider = document.createElement('span');
-        slider.className = 'jux-switch-slider';
-        switchContainer.appendChild(slider);
-        // Label text
-        if (this.state.label) {
-            const labelText = document.createElement('span');
-            labelText.className = 'jux-switch-label-text';
-            labelText.textContent = this.state.label;
-            if (this.state.required) {
-                const requiredSpan = document.createElement('span');
-                requiredSpan.className = 'jux-input-required';
-                requiredSpan.textContent = ' *';
-                labelText.appendChild(requiredSpan);
-            }
-            switchContainer.appendChild(labelText);
-        }
-        wrapper.appendChild(switchContainer);
-        // Error element
-        wrapper.appendChild(this._renderError());
-        // Wire events
-        this._wireStandardEvents(wrapper);
-        // Wire switch-specific sync (maps 'checked' to 'value' property for consistency)
-        const valueSync = this._syncBindings.find(b => b.property === 'value' || b.property === 'checked');
-        if (valueSync) {
-            const { stateObj, toState, toComponent } = valueSync;
-            const transformToState = toState || ((v) => v);
-            const transformToComponent = toComponent || ((v) => Boolean(v));
-            let isUpdating = false;
-            // State → Component
-            stateObj.subscribe((val) => {
-                if (isUpdating)
-                    return;
-                const transformed = transformToComponent(val);
-                this.setValue(transformed);
-            });
-            // Component → State
-            inputEl.addEventListener('change', (e) => {
-                if (isUpdating)
-                    return;
-                isUpdating = true;
-                const checked = inputEl.checked;
-                this.state.checked = checked;
-                this._clearError();
-                const transformed = transformToState(checked);
-                stateObj.set(transformed);
-                // 🎯 Fire the change callback event
-                this._triggerCallback('change', checked, e, this);
-                setTimeout(() => { isUpdating = false; }, 0);
-            });
-        }
-        else {
-            // Default behavior without sync
-            inputEl.addEventListener('change', (e) => {
-                this.state.checked = inputEl.checked;
-                this._clearError();
-                // 🎯 Fire the change callback event
-                this._triggerCallback('change', inputEl.checked, e, this);
-            });
-        }
-        // Always add blur validation
-        inputEl.addEventListener('blur', () => {
-            if (this._hasBeenValidated) {
-                this.validate();
-            }
-        });
-        // Sync label changes
-        const labelSync = this._syncBindings.find(b => b.property === 'label');
-        if (labelSync) {
-            const transform = labelSync.toComponent || ((v) => String(v));
-            labelSync.stateObj.subscribe((val) => {
-                this.label(transform(val));
-            });
-        }
-        container.appendChild(wrapper);
-        return this;
-    }
-    isValid() {
-        const checked = this.getValue();
-        return this._validateValue(checked) === true;
-    }
-}
-export function switchComponent(id, options = {}) {
-    return new Switch(id, options);
-}