juxscript 1.1.350 → 1.1.352

package/dist/lib/components/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../lib/components/list.ts"],"names":[],"mappings":"AAIA,UAAU,QAAQ;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,UAAU,WAAW;IACjB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,SAAS,CAAiD;gBAEtD,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAgCjD,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IAY7B,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI;IAcjC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAUtC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI;IAUlE,UAAU,IAAI,IAAI;IASlB,QAAQ,IAAI,QAAQ,EAAE;IACtB,QAAQ,IAAI,MAAM;IAMlB,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQlC,UAAU,IAAI,MAAM;IAIpB,UAAU,IAAI,WAAW;IAEzB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI;IASlD,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;CAI1B;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;AACvC,eAAe,IAAI,CAAC"}

package/dist/lib/components/list.js

@@ -0,0 +1,178 @@
+import generateId from '../utils/idgen.js';
+import niceName from '../utils/niceName.js';
+import { pageState } from '../state/pageState.js';
+class List {
+    constructor(id, options = {}) {
+        this._items = [];
+        this._value = null;
+        this._selectedIndex = -1;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            ordered: false,
+            selectable: false,
+            itemClass: 'jux-list-item',
+            activeClass: 'jux-list-item--active',
+            ...options
+        };
+        const tagName = this.opts.ordered ? 'ol' : 'ul';
+        this._element = document.createElement(tagName);
+        this._element.id = this.id;
+        this._element.setAttribute('role', 'list');
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        if (this.opts.style)
+            this._element.setAttribute('style', this.opts.style);
+        const resolvedTarget = this.opts.target;
+        const container = resolvedTarget
+            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
+            : document.getElementById('app');
+        container?.appendChild(this._element);
+        if (this.opts.items) {
+            this.addItems(this.opts.items);
+        }
+    }
+    // ═══════════════════════════════════════════════════════════
+    // STANDARD COLLECTION API
+    // ═══════════════════════════════════════════════════════════
+    addItem(item) {
+        const listItem = {
+            ...item,
+            id: item.id || `${this.id}-item-${this._items.length}`,
+            content: item.content || niceName(item.id || `item-${this._items.length}`)
+        };
+        this._items.push(listItem);
+        this._renderItem(listItem);
+        this._dispatchChange();
+        return this;
+    }
+    addItems(items) {
+        for (const item of items) {
+            const listItem = {
+                ...item,
+                id: item.id || `${this.id}-item-${this._items.length}`,
+                content: item.content || niceName(item.id || `item-${this._items.length}`)
+            };
+            this._items.push(listItem);
+            this._renderItem(listItem);
+        }
+        this._dispatchChange();
+        return this;
+    }
+    removeItem(key) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            this._items.splice(idx, 1);
+            this._renderAll();
+            this._dispatchChange();
+        }
+        return this;
+    }
+    updateItem(key, updates) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            this._items[idx] = { ...this._items[idx], ...updates };
+            this._renderAll();
+            this._dispatchChange();
+        }
+        return this;
+    }
+    clearItems() {
+        this._items = [];
+        this._value = null;
+        this._selectedIndex = -1;
+        this._element.innerHTML = '';
+        this._dispatchChange();
+        return this;
+    }
+    getItems() { return [...this._items]; }
+    getCount() { return this._items.length; }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this._value; }
+    setValue(val) {
+        this._value = val;
+        this._selectedIndex = this._items.findIndex(i => i.id === val);
+        this._updateActiveState();
+        this._dispatchChange();
+        return this;
+    }
+    getContent() {
+        return this._items.map(i => i.content).join(', ');
+    }
+    getElement() { return this._element; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // INTERNAL
+    // ═══════════════════════════════════════════════════════════
+    _renderItem(item) {
+        const li = document.createElement('li');
+        li.id = item.id;
+        li.className = item.class || this.opts.itemClass || 'jux-list-item';
+        li.setAttribute('role', 'listitem');
+        if (item.icon) {
+            const iconSpan = document.createElement('span');
+            iconSpan.className = 'jux-list-item-icon';
+            iconSpan.textContent = item.icon;
+            li.appendChild(iconSpan);
+            const textSpan = document.createElement('span');
+            textSpan.className = 'jux-list-item-text';
+            textSpan.textContent = item.content;
+            li.appendChild(textSpan);
+        }
+        else {
+            li.textContent = item.content;
+        }
+        if (item.disabled)
+            li.setAttribute('data-disabled', 'true');
+        if (this.opts.selectable) {
+            li.style.cursor = 'pointer';
+            li.addEventListener('click', () => {
+                if (item.disabled)
+                    return;
+                this._value = item.id;
+                this._selectedIndex = this._items.indexOf(item);
+                this._updateActiveState();
+                if (this._onChange)
+                    this._onChange(this._value);
+                this._element.dispatchEvent(new Event('change', { bubbles: false }));
+            });
+        }
+        this._element.appendChild(li);
+    }
+    _renderAll() {
+        this._element.innerHTML = '';
+        for (const item of this._items) {
+            this._renderItem(item);
+        }
+        this._updateActiveState();
+    }
+    _updateActiveState() {
+        const children = this._element.querySelectorAll('[role="listitem"]');
+        children.forEach((el, idx) => {
+            if (idx === this._selectedIndex) {
+                el.classList.add(this.opts.activeClass);
+                el.setAttribute('data-active', 'true');
+            }
+            else {
+                el.classList.remove(this.opts.activeClass);
+                el.removeAttribute('data-active');
+            }
+        });
+    }
+    _dispatchChange() {
+        this._element.setAttribute('data-count', String(this._items.length));
+        this._element.dispatchEvent(new Event('change', { bubbles: false }));
+    }
+}
+export function list(id, options = {}) {
+    const l = new List(id, options);
+    pageState.__register(l);
+    return l;
+}
+export { List };
+export default list;

package/dist/lib/components/nav.d.ts

@@ -0,0 +1,46 @@
+interface NavItem {
+    id?: string;
+    label: string;
+    path?: string;
+    icon?: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+interface NavOptions {
+    label?: string;
+    items?: NavItem[];
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+    style?: string;
+    target?: string;
+    activeClass?: string;
+    itemClass?: string;
+}
+declare class Nav {
+    id: string;
+    opts: NavOptions;
+    private _element;
+    private _items;
+    private _value;
+    private _onChange;
+    constructor(id: string, options?: NavOptions);
+    addItem(item: NavItem): this;
+    addItems(items: NavItem[]): this;
+    removeItem(key: string | number): this;
+    updateItem(key: string | number, updates: Partial<NavItem>): this;
+    clearItems(): this;
+    getItems(): NavItem[];
+    getCount(): number;
+    getValue(): string | null;
+    setValue(val: string | null): this;
+    getElement(): HTMLElement;
+    onChange(fn: (value: string | null) => void): this;
+    private _renderItem;
+    private _renderAll;
+    private _updateActiveState;
+    private _dispatchChange;
+}
+export declare function nav(id: string, options?: NavOptions): Nav;
+export { Nav, NavItem, NavOptions };
+export default nav;
+//# sourceMappingURL=nav.d.ts.map

package/dist/lib/components/nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav.d.ts","sourceRoot":"","sources":["../../../lib/components/nav.ts"],"names":[],"mappings":"AAIA,UAAU,OAAO;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,UAAU,UAAU;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAiD;gBAEtD,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IA+BhD,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAY5B,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI;IAchC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAUtC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI;IAUjE,UAAU,IAAI,IAAI;IAQlB,QAAQ,IAAI,OAAO,EAAE;IACrB,QAAQ,IAAI,MAAM;IAMlB,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAOlC,UAAU,IAAI,WAAW;IAEzB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI;IASlD,OAAO,CAAC,WAAW;IAqDnB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,eAAe;CAI1B;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,GAAG,GAAG,CAI7D;AAED,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AACpC,eAAe,GAAG,CAAC"}

package/dist/lib/components/nav.js

@@ -0,0 +1,189 @@
+import generateId from '../utils/idgen.js';
+import niceName from '../utils/niceName.js';
+import { pageState } from '../state/pageState.js';
+class Nav {
+    constructor(id, options = {}) {
+        this._items = [];
+        this._value = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            orientation: 'vertical',
+            activeClass: 'jux-nav-item--active',
+            itemClass: 'jux-nav-item',
+            ...options
+        };
+        this._element = document.createElement('nav');
+        this._element.id = this.id;
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        if (this.opts.style)
+            this._element.setAttribute('style', this.opts.style);
+        this._element.setAttribute('data-orientation', this.opts.orientation);
+        this._element.setAttribute('role', 'navigation');
+        const resolvedTarget = this.opts.target;
+        const container = resolvedTarget
+            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
+            : document.getElementById('app');
+        container?.appendChild(this._element);
+        if (this.opts.items) {
+            this.addItems(this.opts.items);
+        }
+    }
+    // ═══════════════════════════════════════════════════════════
+    // STANDARD COLLECTION API
+    // ═══════════════════════════════════════════════════════════
+    addItem(item) {
+        const navItem = {
+            ...item,
+            id: item.id || `${this.id}-item-${this._items.length}`,
+            label: item.label || niceName(item.id || `item-${this._items.length}`)
+        };
+        this._items.push(navItem);
+        this._renderItem(navItem);
+        this._dispatchChange();
+        return this;
+    }
+    addItems(items) {
+        for (const item of items) {
+            const navItem = {
+                ...item,
+                id: item.id || `${this.id}-item-${this._items.length}`,
+                label: item.label || niceName(item.id || `item-${this._items.length}`)
+            };
+            this._items.push(navItem);
+            this._renderItem(navItem);
+        }
+        this._dispatchChange();
+        return this;
+    }
+    removeItem(key) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            this._items.splice(idx, 1);
+            this._renderAll();
+            this._dispatchChange();
+        }
+        return this;
+    }
+    updateItem(key, updates) {
+        const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
+        if (idx > -1) {
+            this._items[idx] = { ...this._items[idx], ...updates };
+            this._renderAll();
+            this._dispatchChange();
+        }
+        return this;
+    }
+    clearItems() {
+        this._items = [];
+        this._value = null;
+        this._element.innerHTML = '';
+        this._dispatchChange();
+        return this;
+    }
+    getItems() { return [...this._items]; }
+    getCount() { return this._items.length; }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this._value; }
+    setValue(val) {
+        this._value = val;
+        this._updateActiveState();
+        this._dispatchChange();
+        return this;
+    }
+    getElement() { return this._element; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // INTERNAL
+    // ═══════════════════════════════════════════════════════════
+    _renderItem(item) {
+        const el = document.createElement('a');
+        el.id = item.id;
+        el.className = this.opts.itemClass || 'jux-nav-item';
+        el.setAttribute('role', 'link');
+        if (item.path) {
+            el.href = item.path;
+        }
+        if (item.disabled) {
+            el.setAttribute('data-disabled', 'true');
+            el.setAttribute('aria-disabled', 'true');
+        }
+        // Always render icon span for consistent alignment
+        const iconSpan = document.createElement('span');
+        iconSpan.className = 'jux-nav-item-icon';
+        if (item.icon) {
+            iconSpan.textContent = item.icon;
+        }
+        else {
+            // Bold first letter as fallback
+            iconSpan.className += ' jux-nav-item-no-icon';
+            iconSpan.textContent = (item.label || '').charAt(0).toUpperCase();
+        }
+        el.appendChild(iconSpan);
+        const textSpan = document.createElement('span');
+        textSpan.className = 'jux-nav-item-text';
+        textSpan.textContent = item.label;
+        el.appendChild(textSpan);
+        el.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (item.disabled)
+                return;
+            this._value = item.path || item.id;
+            this._updateActiveState();
+            if (this._onChange)
+                this._onChange(this._value);
+            this._element.dispatchEvent(new Event('change', { bubbles: false }));
+            // SPA navigation
+            if (item.path) {
+                if (typeof window.navigateTo === 'function') {
+                    window.navigateTo(item.path);
+                }
+                else {
+                    window.history.pushState({}, '', item.path);
+                    window.dispatchEvent(new PopStateEvent('popstate'));
+                }
+            }
+        });
+        this._element.appendChild(el);
+    }
+    _renderAll() {
+        this._element.innerHTML = '';
+        for (const item of this._items) {
+            this._renderItem(item);
+        }
+        this._updateActiveState();
+    }
+    _updateActiveState() {
+        const children = this._element.querySelectorAll('a[href]');
+        children.forEach(el => {
+            const href = el.getAttribute('href');
+            if (href === this._value) {
+                el.classList.add(this.opts.activeClass);
+                el.setAttribute('data-active', 'true');
+                el.setAttribute('aria-current', 'page');
+            }
+            else {
+                el.classList.remove(this.opts.activeClass);
+                el.removeAttribute('data-active');
+                el.removeAttribute('aria-current');
+            }
+        });
+    }
+    _dispatchChange() {
+        this._element.setAttribute('data-count', String(this._items.length));
+        this._element.dispatchEvent(new Event('change', { bubbles: false }));
+    }
+}
+export function nav(id, options = {}) {
+    const n = new Nav(id, options);
+    pageState.__register(n);
+    return n;
+}
+export { Nav };
+export default nav;

package/dist/lib/components/radio.d.ts

@@ -0,0 +1,40 @@
+interface RadioOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface RadioGroupOptions {
+    label?: string;
+    name?: string;
+    options?: RadioOption[];
+    value?: string;
+    direction?: 'vertical' | 'horizontal';
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+}
+declare class RadioGroup {
+    id: string;
+    opts: RadioGroupOptions;
+    private _wrapper;
+    private _inputs;
+    private _onChange;
+    constructor(id: string, options?: RadioGroupOptions);
+    label(value: string): this;
+    direction(value: 'vertical' | 'horizontal'): this;
+    required(value?: boolean): this;
+    disabled(value?: boolean): this;
+    style(value: string): this;
+    class(value: string): this;
+    options(opts: RadioOption[]): this;
+    value(val: string): this;
+    onChange(fn: (value: string, event: Event) => void): this;
+    getValue(): string;
+    private _rebuild;
+    private _buildOptions;
+    render(target?: string | HTMLElement): this;
+}
+export declare function radio(id: string, options?: RadioGroupOptions): RadioGroup;
+export { RadioGroup, RadioOption, RadioGroupOptions };
+//# sourceMappingURL=radio.d.ts.map

package/dist/lib/components/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../lib/components/radio.ts"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,iBAAiB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,cAAM,UAAU;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,iBAAiB,CAAC;IACxB,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,SAAS,CAAwD;gBAE7D,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IAWvD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI;IACjD,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE1B,OAAO,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI;IAMlC,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMxB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,IAAI;IAKzD,QAAQ,IAAI,MAAM;IAKlB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,aAAa;IA6BrB,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;CA4B9C;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAK7E;AAED,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/lib/components/radio.js

@@ -0,0 +1,112 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+class RadioGroup {
+    constructor(id, options = {}) {
+        this._wrapper = null;
+        this._inputs = [];
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            options: [],
+            direction: 'vertical',
+            name: id,
+            ...options
+        };
+    }
+    // Fluent API
+    label(value) { this.opts.label = value; return this; }
+    direction(value) { this.opts.direction = value; return this; }
+    required(value = true) { this.opts.required = value; return this; }
+    disabled(value = true) { this.opts.disabled = value; return this; }
+    style(value) { this.opts.style = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    options(opts) {
+        this.opts.options = opts;
+        if (this._wrapper)
+            this._rebuild();
+        return this;
+    }
+    value(val) {
+        this.opts.value = val;
+        this._inputs.forEach(inp => { inp.checked = inp.value === val; });
+        return this;
+    }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValue() {
+        const checked = this._inputs.find(i => i.checked);
+        return checked?.value ?? this.opts.value ?? '';
+    }
+    _rebuild() {
+        if (!this._wrapper)
+            return;
+        const group = this._wrapper.querySelector('.jux-radio-options');
+        if (!group)
+            return;
+        group.innerHTML = '';
+        this._inputs = [];
+        this._buildOptions(group);
+    }
+    _buildOptions(container) {
+        for (const opt of this.opts.options || []) {
+            const item = document.createElement('label');
+            item.className = 'jux-radio-item';
+            const inp = document.createElement('input');
+            inp.type = 'radio';
+            inp.name = this.opts.name || this.id;
+            inp.value = opt.value;
+            inp.className = 'jux-radio-input';
+            if (opt.value === this.opts.value)
+                inp.checked = true;
+            if (opt.disabled || this.opts.disabled)
+                inp.disabled = true;
+            if (this.opts.required)
+                inp.required = true;
+            inp.addEventListener('change', (e) => {
+                if (this._onChange)
+                    this._onChange(inp.value, e);
+            });
+            const text = document.createElement('span');
+            text.className = 'jux-radio-label';
+            text.textContent = opt.label;
+            item.appendChild(inp);
+            item.appendChild(text);
+            container.appendChild(item);
+            this._inputs.push(inp);
+        }
+    }
+    render(target) {
+        const wrapper = document.createElement('fieldset');
+        wrapper.className = 'jux-radio-group';
+        wrapper.id = this.id;
+        if (this.opts.class)
+            wrapper.className += ` ${this.opts.class}`;
+        if (this.opts.style)
+            wrapper.setAttribute('style', this.opts.style);
+        if (this.opts.label) {
+            const legend = document.createElement('legend');
+            legend.textContent = this.opts.label;
+            legend.className = 'jux-radio-group-label';
+            wrapper.appendChild(legend);
+        }
+        const optionsDiv = document.createElement('div');
+        optionsDiv.className = `jux-radio-options jux-radio-${this.opts.direction}`;
+        this._buildOptions(optionsDiv);
+        wrapper.appendChild(optionsDiv);
+        this._wrapper = wrapper;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(wrapper);
+        return this;
+    }
+}
+export function radio(id, options = {}) {
+    const r = new RadioGroup(id, options);
+    r.render();
+    pageState.__register(r);
+    return r;
+}
+export { RadioGroup };

package/dist/lib/components/select.d.ts

@@ -0,0 +1,41 @@
+interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface SelectOptions {
+    label?: string;
+    placeholder?: string;
+    options?: SelectOption[];
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    multiple?: boolean;
+    class?: string;
+    style?: string;
+}
+declare class Select {
+    id: string;
+    opts: SelectOptions;
+    private _element;
+    private _wrapper;
+    private _onChange;
+    constructor(id: string, options?: SelectOptions);
+    label(value: string): this;
+    placeholder(value: string): this;
+    required(value?: boolean): this;
+    disabled(value?: boolean): this;
+    multiple(value?: boolean): this;
+    style(value: string): this;
+    class(value: string): this;
+    options(opts: SelectOption[]): this;
+    value(val: string): this;
+    onChange(fn: (value: string, event: Event) => void): this;
+    getValue(): string;
+    getSelectedValues(): string[];
+    private _rebuildOptions;
+    render(target?: string | HTMLElement): this;
+}
+export declare function select(id: string, options?: SelectOptions): Select;
+export { Select, SelectOption, SelectOptions };
+//# sourceMappingURL=select.d.ts.map

package/dist/lib/components/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../lib/components/select.ts"],"names":[],"mappings":"AAGA,UAAU,YAAY;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,cAAM,MAAM;IACR,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAAwD;gBAE7D,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IAMnD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAChC,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE1B,OAAO,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI;IAMnC,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMxB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,IAAI;IAKzD,QAAQ,IAAI,MAAM;IAIlB,iBAAiB,IAAI,MAAM,EAAE;IAK7B,OAAO,CAAC,eAAe;IAuBvB,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;CAuC9C;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAKtE;AAED,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}