juxscript 1.1.240 → 1.1.244

package/lib/components/input.ts

@@ -1,473 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['change', 'input'] as const;
-
-export interface InputOptions {
-  type?: string;
-  value?: string;
-  placeholder?: string;
-  label?: string;
-  icon?: string;
-  required?: boolean;
-  disabled?: boolean;
-  name?: string;
-  rows?: number;
-  min?: number;
-  max?: number;
-  step?: number;
-  minLength?: number;
-  maxLength?: number;
-  pattern?: string;
-  onValidate?: (value: string) => boolean | string;
-  style?: string;
-  class?: string;
-}
-
-interface InputState extends BaseState {
-  type: string;
-  value: string;
-  placeholder: string;
-  icon: string;
-  rows: number;
-  min?: number;
-  max?: number;
-  step?: number;
-  minLength?: number;
-  maxLength?: number;
-  pattern?: string;
-  // ✅ Form-specific properties from BaseState are inherited:
-  // label, required, name, errorMessage
-}
-
-export class Input extends BaseComponent<InputState> {
-  constructor(id: string, options: InputOptions = {}) {
-    super(id, {
-      // ✅ BaseState properties
-      visible: true,
-      disabled: options.disabled ?? false,
-      loading: false,
-      class: options.class ?? '',
-      style: options.style ?? '',
-      attributes: {},
-
-      // ✅ Form-specific BaseState properties
-      label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate if not provided
-      required: options.required ?? false,
-      name: options.name ?? id,
-      errorMessage: undefined,
-
-      // ✅ Input-specific properties
-      type: options.type ?? 'text',
-      value: options.value ?? '',
-      placeholder: options.placeholder ?? '',
-      icon: options.icon ?? '',
-      rows: options.rows ?? 3,
-      min: options.min,
-      max: options.max,
-      step: options.step,
-      minLength: options.minLength,
-      maxLength: options.maxLength,
-      pattern: options.pattern
-    });
-
-    if (options.onValidate) {
-      this._onValidate = options.onValidate;
-    }
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
-
-  type(value: string): this {
-    this.state.type = value;
-    return this;
-  }
-
-  value(value: string | number): this {
-    return this.setValue(String(value));
-  }
-
-  placeholder(value: string): this {
-    this.state.placeholder = value;
-    return this;
-  }
-
-  icon(value: string): this {
-    this.state.icon = value;
-    return this;
-  }
-
-  rows(value: number): this {
-    this.state.rows = value;
-    return this;
-  }
-
-  min(value: number): this {
-    this.state.min = value;
-    return this;
-  }
-
-  max(value: number): this {
-    this.state.max = value;
-    return this;
-  }
-
-  step(value: number): this {
-    this.state.step = value;
-    return this;
-  }
-
-  minLength(value: number): this {
-    this.state.minLength = value;
-    return this;
-  }
-
-  maxLength(value: number): this {
-    this.state.maxLength = value;
-    return this;
-  }
-
-  pattern(value: string): this {
-    this.state.pattern = value;
-    return this;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FORM INPUT IMPLEMENTATION (Override BaseComponent methods)
-   * ═════════════════════════════════════════════════════════════════ */
-
-  getValue(): string {
-    return this.state.value;
-  }
-
-  setValue(value: string): this {
-    this.state.value = value;
-    if (this._inputElement) {
-      (this._inputElement as HTMLInputElement | HTMLTextAreaElement).value = value;
-    }
-    return this;
-  }
-
-  getNumericValue(): number | null {
-    const num = Number(this.state.value);
-    return isNaN(num) ? null : num;
-  }
-
-  validate(): boolean {
-    this._hasBeenValidated = true;
-    const value = this.getValue();
-    const result = this._validateValue(value);
-
-    if (result === true) {
-      this._clearError();
-      return true;
-    } else {
-      this._showError(result as string);
-      return false;
-    }
-  }
-
-  isValid(): boolean {
-    const value = this.getValue();
-    return this._validateValue(value) === true;
-  }
-
-  protected _validateValue(value: string): boolean | string {
-    const { required, type, min, max, minLength, maxLength, pattern } = this.state;
-
-    if (required && !value.trim()) {
-      return 'This field is required';
-    }
-
-    if (type === 'number' && value) {
-      const numValue = Number(value);
-
-      if (isNaN(numValue)) {
-        return 'Must be a valid number';
-      }
-
-      if (min !== undefined && numValue < min) {
-        return `Must be at least ${min}`;
-      }
-
-      if (max !== undefined && numValue > max) {
-        return `Must be at most ${max}`;
-      }
-    }
-
-    if ((type === 'text' || type === 'textarea') && value) {
-      if (minLength !== undefined && value.length < minLength) {
-        return `Must be at least ${minLength} characters`;
-      }
-
-      if (maxLength !== undefined && value.length > maxLength) {
-        return `Must be at most ${maxLength} characters`;
-      }
-    }
-
-    if (pattern && value) {
-      const regex = new RegExp(pattern);
-      if (!regex.test(value)) {
-        return 'Invalid format';
-      }
-    }
-
-    if (this._onValidate) {
-      const result = this._onValidate(value);
-      if (result !== true) {
-        return result || 'Invalid value';
-      }
-    }
-
-    return true;
-  }
-
-  protected _buildInputElement(): HTMLElement {
-    const { type, value, placeholder, required, disabled, name, rows, min, max, step, minLength, maxLength, pattern } = this.state;
-
-    let inputEl: HTMLInputElement | HTMLTextAreaElement;
-
-    if (type === 'textarea') {
-      inputEl = document.createElement('textarea');
-      inputEl.rows = rows;
-      if (minLength !== undefined) inputEl.minLength = minLength;
-      if (maxLength !== undefined) inputEl.maxLength = maxLength;
-    } else {
-      inputEl = document.createElement('input');
-      inputEl.type = type;
-
-      if (type === 'number') {
-        if (min !== undefined) inputEl.min = String(min);
-        if (max !== undefined) inputEl.max = String(max);
-        if (step !== undefined) inputEl.step = String(step);
-      }
-
-      if (type === 'text' || type === 'email' || type === 'tel' || type === 'url') {
-        if (minLength !== undefined) inputEl.minLength = minLength;
-        if (maxLength !== undefined) inputEl.maxLength = maxLength;
-        if (pattern) inputEl.pattern = pattern;
-      }
-    }
-
-    inputEl.className = 'jux-input-element';
-    inputEl.id = `${this._id}-input`;
-    inputEl.name = name!;
-    inputEl.value = value;
-    inputEl.placeholder = placeholder;
-    inputEl.required = required!;
-    inputEl.disabled = disabled!;
-
-    return inputEl;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-    const container = this._setupContainer(targetId);
-
-    const { icon, maxLength, type, style, class: className, label } = this.state;
-
-    // Build wrapper
-    const wrapper = document.createElement('div');
-    wrapper.className = 'jux-input';
-    wrapper.id = this._id;
-    if (className) wrapper.className += ` ${className}`;
-    if (style) wrapper.setAttribute('style', style);
-
-    // ✅ Label - always render if exists or can be auto-generated
-    if (label || !label) {  // Always render label
-      wrapper.appendChild(this._renderLabel());
-    }
-
-    // Input container
-    const inputContainer = document.createElement('div');
-    inputContainer.className = 'jux-input-container';
-    if (icon) inputContainer.classList.add('jux-input-with-icon');
-
-    // Icon
-    if (icon) {
-      const iconEl = document.createElement('span');
-      iconEl.className = 'jux-input-icon';
-      iconEl.appendChild(renderIcon(icon));
-      inputContainer.appendChild(iconEl);
-    }
-
-    // Input element
-    const inputEl = this._buildInputElement();
-    this._inputElement = inputEl;
-    inputContainer.appendChild(inputEl);
-    wrapper.appendChild(inputContainer);
-
-    // Error element
-    wrapper.appendChild(this._renderError());
-
-    // Character counter
-    if (maxLength && (type === 'text' || type === 'textarea')) {
-      const counterEl = document.createElement('div');
-      counterEl.className = 'jux-input-counter';
-      counterEl.id = `${this._id}-counter`;
-      counterEl.textContent = `${this.state.value.length}/${maxLength}`;
-      wrapper.appendChild(counterEl);
-
-      inputEl.addEventListener('input', (e) => {
-        const input = inputEl as HTMLInputElement | HTMLTextAreaElement;
-        counterEl.textContent = `${input.value.length}/${maxLength}`;
-        this.state.value = input.value;
-        this._triggerCallback('input', input.value, e, this);
-      });
-    } else {
-      inputEl.addEventListener('input', (e) => {
-        const input = inputEl as HTMLInputElement | HTMLTextAreaElement;
-        this.state.value = input.value;
-        this._triggerCallback('input', input.value, e, this);
-      });
-    }
-
-    // Fire change event on blur
-    inputEl.addEventListener('change', (e) => {
-      const input = inputEl as HTMLInputElement | HTMLTextAreaElement;
-      this._triggerCallback('change', input.value, e, this);
-    });
-
-    // Wire events
-    this._wireStandardEvents(wrapper);
-    this._wireFormSync(inputEl, 'input');
-
-    // Sync label changes
-    const labelSync = this._syncBindings.find(b => b.property === 'label');
-    if (labelSync) {
-      const transform = labelSync.toComponent || ((v: any) => String(v));
-      labelSync.stateObj.subscribe((val: any) => {
-        this.label(transform(val));
-      });
-    }
-
-    container.appendChild(wrapper);
-
-    requestAnimationFrame(() => {
-      if ((window as any).lucide) {
-        (window as any).lucide.createIcons();
-      }
-    });
-
-    return this;
-  }
-}
-
-export function input(id: string, options: InputOptions = {}): Input {
-  return new Input(id, options);
-}
-
-// Shorter, consistent naming
-export function text(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'text' });
-}
-
-export function textRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'text', required: true });
-}
-
-
-export function number(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'number' });
-}
-
-
-export function numberRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'number', required: true });
-}
-
-
-export function email(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'email' });
-}
-
-export function emailRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'email', required: true });
-}
-
-export function password(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'password' });
-}
-
-export function passwordRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'password', required: true });
-}
-
-export function tel(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'tel' });
-}
-
-export function telRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'tel', required: true });
-}
-
-export function phone(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'tel' });
-}
-export function phoneRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'tel', required: true });
-}
-
-export function url(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'url' });
-}
-
-export function urlRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'url', required: true });
-}
-export function textarea(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'textarea' });
-}
-export function textareaRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'textarea', required: true });
-}
-
-export function range(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'range' });
-}
-
-export function rangeRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'range', required: true });
-}
-
-
-export function date(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'date' });
-}
-
-
-export function dateRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'date', required: true });
-}
-
-export function time(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'time' });
-}
-
-export function timeRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'time', required: true });
-}
-
-export function color(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'color' });
-}
-
-export function colorRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'color', required: true });
-}

package/lib/components/layer.d.ts

@@ -1,72 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-export interface LayerOptions {
-    preset?: LayerPreset;
-    opacity?: number;
-    zIndex?: number;
-    blur?: number;
-    content?: string | BaseComponent<any>;
-    style?: string;
-    class?: string;
-}
-interface LayerState extends BaseState {
-    preset?: string;
-    content?: string;
-}
-/**
- * Gradient preset names from gradients.css
- */
-export type LayerPreset = 'ocean' | 'sunset' | 'forest' | 'fire' | 'ice' | 'candy' | 'emerald' | 'midnight' | 'peach' | 'royal' | 'coral' | 'mint' | 'grape' | 'cherry' | 'sky' | 'aurora' | 'tropical' | 'cosmic' | 'neon' | 'volcano' | 'radial-sun' | 'radial-moon' | 'radial-blue' | 'radial-purple' | 'radial-fire' | 'radial-ocean' | 'radial-emerald' | 'radial-sunset' | 'conic-rainbow' | 'conic-sunset' | 'conic-ocean' | 'conic-fire' | 'conic-neon' | 'dark-space' | 'dark-navy' | 'dark-purple' | 'dark-forest' | 'dark-crimson' | 'dark-slate' | 'overlay-dark' | 'overlay-light' | 'overlay-blue' | 'overlay-purple' | 'overlay-sunset' | 'mesh-purple' | 'mesh-ocean' | 'mesh-fire' | 'mesh-neon' | 'pastel-pink' | 'pastel-blue' | 'pastel-green' | 'pastel-purple' | 'pastel-peach' | 'pastel-lavender' | 'animated' | 'animated-fast' | 'animated-slow';
-export declare class Layer extends BaseComponent<LayerState> {
-    constructor(id: string, options?: LayerOptions);
-    protected getTriggerEvents(): readonly string[];
-    protected getCallbackEvents(): readonly string[];
-    /**
-     * Set layer opacity
-     */
-    opacity(value: number): this;
-    /**
-     * Set layer z-index
-     */
-    zIndex(value: number): this;
-    /**
-     * Apply a gradient preset from gradients.css
-     */
-    preset(value: LayerPreset): this;
-    /**
-     * Set layer content (text or component)
-     */
-    content(value: string | BaseComponent<any>): this;
-    /**
-     * Apply backdrop blur (for overlay effects)
-     */
-    backdropBlur(value: number): this;
-    /**
-     * Make layer cover entire parent (position: absolute with inset: 0)
-     */
-    fullCover(): this;
-    /**
-     * Make layer fixed to viewport
-     */
-    fixed(): this;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-    update(prop: string, value: any): void;
-}
-export declare function layer(id: string, options?: LayerOptions): Layer;
-/**
- * Create a gradient layer with preset
- */
-export declare function gradient(id: string, preset: LayerPreset, options?: Omit<LayerOptions, 'preset'>): Layer;
-/**
- * Create a dark overlay (for hero images, etc.)
- */
-export declare function overlay(id: string, opacity?: number): Layer;
-/**
- * Create a blur overlay (glassmorphism effect)
- */
-export declare function glassLayer(id: string, blur?: number, opacity?: number): Layer;
-/**
- * Create an animated gradient background
- */
-export declare function animatedGradient(id: string, speed?: 'fast' | 'normal' | 'slow'): Layer;
-export {};
-//# sourceMappingURL=layer.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"layer.d.ts","sourceRoot":"","sources":["layer.ts"],"names":[],"mappings":"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"}