atomicuilibrary 0.0.1 → 0.1.3

package/dist/esm/ui-checkbox-group.entry.js

@@ -1,328 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DUsoYu9r.js';
-
-const checkboxGroupCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.checkbox-group{display:flex;flex-direction:column;gap:12px}.checkbox-group.is-victory .group-label .selection-count{animation:victory-pulse 2s infinite ease-in-out;background:var(--primary-color);color:var(--text-standard, #ffffff);box-shadow:0 0 15px var(--primary-color)}.group-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--label-color, var(--text-primary, #333));margin-bottom:8px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;cursor:default}.group-label .selection-count{font-size:10px;font-weight:600;text-transform:none;letter-spacing:normal;opacity:1;color:var(--label-subtitle-color, var(--text-secondary, #666));background:var(--bg-secondary, #f3f4f6);padding:2px 8px;border-radius:10px}.required-indicator{color:var(--danger-color, #f44336);margin-inline-start:4px}.select-all-container{padding-bottom:8px;border-bottom:1px solid var(--border-color, #e0e0e0)}.checkbox-group-items{display:flex}.checkbox-group-vertical .checkbox-group-items{flex-direction:column}.checkbox-group-horizontal .checkbox-group-items{flex-direction:row;flex-wrap:wrap}.checkbox-group-disabled{opacity:0.6;pointer-events:none}.checkbox-group-readonly{pointer-events:none}.checkbox-group-invalid .group-label{color:var(--danger-color, #f44336)}.helper-text{font-size:12px;color:var(--label-subtitle-color, var(--text-secondary, #666));display:flex;align-items:center;gap:6px}.helper-text.error{color:var(--danger-color, #f44336)}.helper-text i{font-size:14px}.checkbox-group-sm .group-label{font-size:12px}.checkbox-group-sm .helper-text{font-size:11px}.checkbox-group-lg .group-label{font-size:16px}.checkbox-group-lg .helper-text{font-size:13px}.checkbox-search{position:relative;margin-bottom:4px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.checkbox-search .search-input-wrapper{position:relative;display:flex;align-items:center;background:rgba(var(--primary-rgb, 139, 92, 246), 0.03);border:1px solid rgba(0, 0, 0, 0.05);border-radius:12px;padding:2px 4px;transition:all 0.3s}.checkbox-search .search-input-wrapper:focus-within{background:var(--bg-primary, #ffffff);border-color:var(--primary-color);box-shadow:0 4px 12px rgba(var(--primary-rgb), 0.15);transform:translateY(-1px)}.checkbox-search .search-icon{margin-left:12px;opacity:0.4;font-size:16px;color:var(--primary-color)}.checkbox-search input.search-input{flex:1;border:none;background:transparent;padding:10px 12px;font-size:13px;font-weight:500;color:var(--text-primary);outline:none}.checkbox-search input.search-input::placeholder{opacity:1}.checkbox-search .clear-search{background:rgba(0, 0, 0, 0.05);border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-right:6px;color:var(--text-secondary);transition:all 0.2s}.checkbox-search .clear-search:hover{background:rgba(0, 0, 0, 0.1);color:var(--text-primary);transform:scale(1.1)}.checkbox-search .clear-search ui-icon{font-size:14px}@keyframes victory-pulse{0%{transform:scale(1);box-shadow:0 0 0px var(--primary-color)}50%{transform:scale(1.05);box-shadow:0 0 15px var(--primary-color)}100%{transform:scale(1);box-shadow:0 0 0px var(--primary-color)}}.no-results{font-size:14px;color:var(--text-secondary, #999);padding:8px 0;font-style:italic}.checkbox-group-grid .checkbox-group-items{display:grid}`;
-
-const CheckboxGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.groupChange = createEvent(this, "groupChange");
-        this.groupValidation = createEvent(this, "groupValidation");
-    }
-    /**
-     * Ensures value is always a string array
-     */
-    normalizeValue(val) {
-        if (Array.isArray(val))
-            return val;
-        if (typeof val === 'string')
-            return val ? val.split(',') : [];
-        return [];
-    }
-    get el() { return getElement(this); }
-    internals;
-    value = [];
-    name = '';
-    label = '';
-    helperText = '';
-    errorMessage = '';
-    required = false;
-    disabled = false;
-    readonly = false;
-    invalid = false;
-    orientation = 'vertical';
-    gap = '12px';
-    showSelectAll = false;
-    selectAllLabel = 'Select All';
-    buttonGroup = false;
-    min = 0;
-    max = Infinity;
-    validateOnChange = true;
-    size = 'md';
-    color = 'primary';
-    showSelectionCount = false;
-    /** Entrance animation */
-    reveal = 'none';
-    /** Delay for entry animation (ms) */
-    revealDelay = 0;
-    /** Stagger delay between items */
-    revealStagger = 60;
-    /** High-Fidelity: Victory glow pulse when all selected */
-    victoryGlow = false;
-    /** High-Fidelity: RTL support */
-    rtl = false;
-    selectAllState = 'none';
-    isVictory = false;
-    groupChange;
-    groupValidation;
-    componentWillLoad() {
-        this.internals = this.el.attachInternals();
-        this.updateFormValue();
-        this.discoverCheckboxes();
-        this.updateCheckboxStates();
-        this.updateSelectAllState();
-    }
-    /**
-     * Stencil form-association callback
-     */
-    formResetCallback() {
-        this.value = [];
-        this.updateCheckboxStates();
-        this.updateSelectAllState();
-        this.updateFormValue();
-    }
-    handleValueChange() {
-        this.updateCheckboxStates();
-        this.updateSelectAllState();
-        if (this.validateOnChange) {
-            this.validate();
-        }
-    }
-    handleCheckboxChange(event) {
-        const { checked, value: checkboxValue } = event.detail;
-        if (this.disabled || this.readonly)
-            return;
-        let valueArr = this.normalizeValue(this.value);
-        if (checked) {
-            if (!valueArr.includes(checkboxValue)) {
-                if (this.max === Infinity || valueArr.length < this.max) {
-                    valueArr = [...valueArr, checkboxValue];
-                }
-            }
-        }
-        else {
-            valueArr = valueArr.filter(v => v !== checkboxValue);
-        }
-        this.value = valueArr;
-        this.groupChange.emit({ value: this.value });
-        this.updateSelectAllState();
-        if (this.validateOnChange) {
-            this.validate();
-        }
-        this.updateFormValue();
-    }
-    updateFormValue() {
-        if (this.name) {
-            const data = new FormData();
-            this.value.forEach(val => data.append(this.name, val));
-            this.internals.setFormValue(data);
-        }
-        else {
-            this.internals.setFormValue(this.value.join(','));
-        }
-    }
-    discoverCheckboxes() {
-        // This is no longer needed as we use getAllCheckboxes in real-time
-    }
-    updateCheckboxStates() {
-        const allCbs = this.getAllCheckboxes();
-        const valueArr = this.normalizeValue(this.value);
-        const isMaxReached = this.max !== Infinity && valueArr.length >= this.max;
-        allCbs.forEach((checkbox, index) => {
-            checkbox.checked = valueArr.includes(checkbox.value);
-            checkbox.disabled = this.disabled || (isMaxReached && !checkbox.checked) || checkbox.disabled;
-            checkbox.readonly = this.readonly;
-            checkbox.size = this.size;
-            checkbox.color = this.color;
-            checkbox.reveal = this.reveal;
-            checkbox.revealDelay = this.revealDelay + (index * this.revealStagger);
-            checkbox.rtl = this.rtl;
-            checkbox.isButton = this.buttonGroup;
-            if (this.name) {
-                checkbox.name = this.name;
-            }
-        });
-    }
-    getAllCheckboxes() {
-        const slotted = Array.from(this.el.querySelectorAll('ui-checkbox'));
-        // If we have options prop, we need to consider them too, but they are rendered as components
-        // Stencil's shadow DOM might make this tricky if they are inside. 
-        // Actually, we can just get them from the shadow root if they are rendered in renderDataOptions
-        const shadowCbs = Array.from(this.el.shadowRoot.querySelectorAll('ui-checkbox'));
-        return [...slotted, ...shadowCbs];
-    }
-    updateSelectAllState() {
-        const allCbs = this.getAllCheckboxes();
-        const valueArr = this.normalizeValue(this.value);
-        const enabledCheckboxes = allCbs.filter((cb) => !cb.disabled);
-        if (enabledCheckboxes.length === 0)
-            return;
-        const checkedCount = enabledCheckboxes.filter((cb) => valueArr.includes(cb.value)).length;
-        if (checkedCount === 0) {
-            this.selectAllState = 'none';
-            this.isVictory = false;
-        }
-        else if (checkedCount === enabledCheckboxes.length) {
-            this.selectAllState = 'all';
-            if (this.victoryGlow)
-                this.isVictory = true;
-        }
-        else {
-            this.selectAllState = 'some';
-            this.isVictory = false;
-        }
-    }
-    handleSelectAllChange = (event) => {
-        if (this.disabled || this.readonly)
-            return;
-        const target = event.target;
-        const allCbs = this.getAllCheckboxes();
-        const enabledCheckboxes = allCbs.filter((cb) => !cb.disabled);
-        if (target.checked) {
-            // Select all enabled checkboxes
-            const allValues = enabledCheckboxes.map((cb) => cb.value);
-            const uniqueValues = Array.from(new Set([...this.value, ...allValues]));
-            // Respect max limit
-            if (this.max !== Infinity) {
-                this.value = uniqueValues.slice(0, this.max);
-            }
-            else {
-                this.value = uniqueValues;
-            }
-        }
-        else {
-            // Deselect all
-            const enabledValues = enabledCheckboxes.map((cb) => cb.value);
-            this.value = this.value.filter(v => !enabledValues.includes(v));
-        }
-        this.groupChange.emit({ value: this.value });
-        this.updateSelectAllState();
-        if (this.validateOnChange) {
-            this.validate();
-        }
-    };
-    validate() {
-        const errors = [];
-        if (this.required && this.value.length === 0) {
-            errors.push('At least one option must be selected');
-        }
-        if (this.min > 0 && this.value.length < this.min) {
-            errors.push(`At least ${this.min} option${this.min > 1 ? 's' : ''} must be selected`);
-        }
-        if (this.max !== Infinity && this.value.length > this.max) {
-            errors.push(`No more than ${this.max} option${this.max > 1 ? 's' : ''} can be selected`);
-        }
-        const valid = errors.length === 0;
-        this.groupValidation.emit({ valid, errors });
-        return valid;
-    }
-    selectAll() {
-        const allCbs = this.getAllCheckboxes();
-        const enabledCheckboxes = allCbs.filter((cb) => !cb.disabled);
-        const allValues = enabledCheckboxes.map((cb) => cb.value);
-        if (this.max !== Infinity) {
-            this.value = allValues.slice(0, this.max);
-        }
-        else {
-            this.value = allValues;
-        }
-        this.groupChange.emit({ value: this.value });
-    }
-    deselectAll() {
-        this.value = [];
-        this.groupChange.emit({ value: this.value });
-    }
-    toggleAll() {
-        if (this.selectAllState === 'all') {
-            this.deselectAll();
-        }
-        else {
-            this.selectAll();
-        }
-    }
-    renderSelectAll() {
-        if (!this.showSelectAll)
-            return null;
-        return (h("div", { class: "select-all-container" }, h("ui-checkbox", { checked: this.selectAllState === 'all', indeterminate: this.selectAllState === 'some', label: this.selectAllLabel, disabled: this.disabled, readonly: this.readonly, size: this.size, color: this.color, rtl: this.rtl, onCheckboxChange: this.handleSelectAllChange })));
-    }
-    renderLabel() {
-        if (!this.label)
-            return null;
-        return (h("div", { class: "group-label" }, h("span", { class: "label-text" }, this.label, this.required && h("span", { class: "required-indicator" }, "*")), this.showSelectionCount && (h("span", { class: "selection-count" }, "(", this.value.length, this.max !== Infinity ? ` / ${this.max}` : '', " selected)"))));
-    }
-    renderHelperText() {
-        if (this.invalid && this.errorMessage) {
-            return (h("div", { class: "helper-text error" }, h("ui-icon", { name: "fa-exclamation-circle" }), this.errorMessage));
-        }
-        if (this.helperText) {
-            return h("div", { class: "helper-text" }, this.helperText);
-        }
-        if (this.min > 0 || this.max !== Infinity) {
-            const count = this.value.length;
-            let text = '';
-            if (this.min > 0 && this.max !== Infinity) {
-                text = `Select ${this.min}-${this.max} options (${count} selected)`;
-            }
-            else if (this.min > 0) {
-                text = `Select at least ${this.min} option${this.min > 1 ? 's' : ''} (${count} selected)`;
-            }
-            else if (this.max !== Infinity) {
-                text = `Select up to ${this.max} option${this.max > 1 ? 's' : ''} (${count} selected)`;
-            }
-            return h("div", { class: "helper-text" }, text);
-        }
-        return null;
-    }
-    options = [];
-    searchable = false;
-    searchPlaceholder = 'Search options...';
-    layout = 'list';
-    columns = 2; // For grid layout
-    searchQuery = '';
-    handleSearch = (e) => {
-        this.searchQuery = e.target.value.toLowerCase();
-    };
-    getFilteredOptions() {
-        if (!this.options || this.options.length === 0)
-            return [];
-        // Normalize options
-        const normalizedOptions = this.options.map(opt => typeof opt === 'string' ? { label: opt, value: opt, disabled: false } : opt);
-        if (!this.searchQuery)
-            return normalizedOptions;
-        return normalizedOptions.filter(opt => opt.label.toLowerCase().includes(this.searchQuery));
-    }
-    renderSearch() {
-        if (!this.searchable)
-            return null;
-        return (h("div", { class: {
-                'checkbox-search': true,
-                'search-active': this.searchQuery.length > 0
-            } }, h("div", { class: "search-input-wrapper" }, h("ui-icon", { name: "search", library: "lucide", class: "search-icon" }), h("input", { type: "text", placeholder: this.searchPlaceholder, onInput: this.handleSearch, value: this.searchQuery, class: "search-input" }), this.searchQuery.length > 0 && (h("ui-button", { variant: "ghost", class: "clear-search", onClick: () => { this.searchQuery = ''; }, icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })))));
-    }
-    renderDataOptions() {
-        const visibleOptions = this.getFilteredOptions();
-        if (visibleOptions.length === 0 && this.searchQuery) {
-            return h("div", { class: "no-results" }, "No options found");
-        }
-        const valueArr = this.normalizeValue(this.value);
-        return visibleOptions.map((opt, index) => (h("ui-checkbox", { value: opt.value, label: opt.label, disabled: this.disabled || opt.disabled, readonly: this.readonly, size: this.size, color: this.color, variant: opt.variant || 'default', name: this.name, checked: valueArr.includes(opt.value), reveal: this.reveal, revealDelay: this.revealDelay + (index * this.revealStagger), rtl: this.rtl, isButton: this.buttonGroup, onCheckboxChange: this.handleCheckboxChange })));
-    }
-    render() {
-        const containerClasses = {
-            'checkbox-group': true,
-            [`checkbox-group-${this.orientation}`]: this.layout === 'list',
-            [`checkbox-group-grid`]: this.layout === 'grid',
-            [`checkbox-group-cols-${this.columns}`]: this.layout === 'grid',
-            [`checkbox-group-${this.size}`]: true,
-            'checkbox-group-disabled': this.disabled,
-            'checkbox-group-readonly': this.readonly,
-            'checkbox-group-invalid': this.invalid,
-            'checkbox-group-button': this.buttonGroup,
-            'is-victory': this.isVictory
-        };
-        const hasDataOptions = this.options && this.options.length > 0;
-        return (h("div", { key: '05a2da58c9dd7f3438076d3beb725f3596545cb6', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.renderLabel(), this.renderSearch(), this.renderSelectAll(), h("div", { key: '0a64f5ff1b6474c771059e6d856b42a48641d5a1', class: "checkbox-group-items", style: this.layout === 'grid' ? {
-                display: 'grid',
-                gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
-                gap: this.gap
-            } : { gap: this.gap }, role: "group", "aria-labelledby": this.label ? 'group-label' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.invalid ? 'true' : 'false' }, hasDataOptions ? this.renderDataOptions() : h("slot", null)), this.renderHelperText()));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "value": [{
-                "handleValueChange": 0
-            }]
-    }; }
-};
-CheckboxGroup.style = checkboxGroupCss();
-
-export { CheckboxGroup as ui_checkbox_group };

package/dist/esm/ui-color-controller.entry.js

@@ -1,148 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DUsoYu9r.js';
-
-const colorControllerCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit;width:100%;max-width:2a0px}.col-ctrl-label{font-size:13px;font-weight:700;color:var(--color-primary, #6366f1);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em}.col-ctrl-grid{display:flex;flex-direction:column;gap:6px}.col-ctrl-row{display:flex;align-items:center;gap:8px}.col-ctrl-key{flex:0 0 20px;font-size:12px;font-weight:500;color:var(--text-secondary, #4b5563)}.col-ctrl-input-wrapper{flex:1;display:flex;align-items:center;border:1px solid var(--border-default, #e5e7eb);border-radius:4px;background:var(--bg-primary, #ffffff);padding:2px 6px;transition:all 0.2s}.col-ctrl-input-wrapper:focus-within{border-color:var(--color-primary, #6366f1);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 99, 102, 241), 0.1)}.col-ctrl-input{flex:1;border:none;background:transparent;outline:none;font-size:13px;padding:4px;width:100%;color:var(--text-primary, #111827);font-family:monospace;text-align:right}.col-ctrl-input::-webkit-outer-spin-button,.col-ctrl-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hex-row .col-ctrl-key{font-family:monospace;font-weight:700}.col-ctrl-unit{font-size:12px;color:var(--text-muted, #9ca3af);margin-left:4px;min-width:12px}.hex-input{text-align:left;letter-spacing:0.05em;font-weight:600}`;
-
-const ColorController = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.colorChange = createEvent(this, "colorChange");
-    }
-    /** Current color as a hex string */
-    value = '#10b981';
-    /** Label for the entire group */
-    label = '';
-    /** Emitted when any color channel changes */
-    colorChange;
-    r = 16;
-    g = 185;
-    b = 129;
-    h = 159;
-    s = 91;
-    v = 73;
-    hex = '10B981';
-    handleValueUpdate(newValue) {
-        this.updateAllFromHex(newValue);
-    }
-    componentWillLoad() {
-        this.updateAllFromHex(this.value);
-    }
-    updateAllFromHex(hex) {
-        if (!hex)
-            return;
-        const clean = hex.startsWith('#') ? hex.slice(1) : hex;
-        this.hex = clean.toUpperCase();
-        const bigInt = parseInt(clean, 16);
-        this.r = (bigInt >> 16) & 255;
-        this.g = (bigInt >> 8) & 255;
-        this.b = bigInt & 255;
-        const r = this.r / 255;
-        const g = this.g / 255;
-        const b = this.b / 255;
-        const max = Math.max(r, g, b);
-        const min = Math.min(r, g, b);
-        const d = max - min;
-        let h = 0;
-        if (d === 0)
-            h = 0;
-        else if (max === r)
-            h = ((g - b) / d) % 6;
-        else if (max === g)
-            h = (b - r) / d + 2;
-        else if (max === b)
-            h = (r - g) / d + 4;
-        h = Math.round(h * 60);
-        if (h < 0)
-            h += 360;
-        const s = max === 0 ? 0 : d / max;
-        const v = max;
-        this.h = h;
-        this.s = Math.round(s * 100);
-        this.v = Math.round(v * 100);
-    }
-    emitChange() {
-        this.value = `#${this.hex}`;
-        this.colorChange.emit(this.value);
-    }
-    handleHexInput = (e) => {
-        const val = e.detail.value || '';
-        if (val.length === 6 || val.length === 3) {
-            if (/^[0-9A-Fa-f]+$/.test(val)) {
-                this.hex = val.toUpperCase();
-                this.updateAllFromHex(this.hex);
-                this.emitChange();
-            }
-        }
-    };
-    handleRgbChange(channel, val) {
-        if (isNaN(val))
-            return;
-        this[channel] = Math.max(0, Math.min(255, val));
-        this.hex = ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1).toUpperCase();
-        this.updateAllFromHex(this.hex);
-        this.emitChange();
-    }
-    handleHsvChange(channel, val) {
-        if (isNaN(val))
-            return;
-        if (channel === 'h')
-            this.h = Math.max(0, Math.min(360, val));
-        if (channel === 's')
-            this.s = Math.max(0, Math.min(100, val));
-        if (channel === 'v')
-            this.v = Math.max(0, Math.min(100, val));
-        // HSV to RGB
-        const h = this.h;
-        const s = this.s / 100;
-        const v = this.v / 100;
-        const c = v * s;
-        const x = c * (1 - Math.abs((h / 60) % 2 - 1));
-        const m = v - c;
-        let r = 0, g = 0, b = 0;
-        if (h < 60) {
-            r = c;
-            g = x;
-            b = 0;
-        }
-        else if (h < 120) {
-            r = x;
-            g = c;
-            b = 0;
-        }
-        else if (h < 180) {
-            r = 0;
-            g = c;
-            b = x;
-        }
-        else if (h < 240) {
-            r = 0;
-            g = x;
-            b = c;
-        }
-        else if (h < 300) {
-            r = x;
-            g = 0;
-            b = c;
-        }
-        else {
-            r = c;
-            g = 0;
-            b = x;
-        }
-        this.r = Math.round((r + m) * 255);
-        this.g = Math.round((g + m) * 255);
-        this.b = Math.round((b + m) * 255);
-        this.hex = ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1).toUpperCase();
-        this.emitChange();
-    }
-    render() {
-        return (h(Host, { key: 'b3bf272d34509127138914724e36b188edd43d6e' }, this.label && h("div", { key: '36ebf9de294642b1d67135b6c8c452fb47c612e6', class: "col-ctrl-label" }, this.label), h("div", { key: '59133d3793607ff7168906dbddd0e7e40c7244a9', class: "col-ctrl-grid" }, h("div", { key: '44b1a8ae8bbc3faaf5c9b009eab5580297761c2d', class: "col-ctrl-row" }, h("span", { key: 'd5fe3fe12e6a116569b2939a0d63f8ff5599184f', class: "col-ctrl-key" }, "H"), h("div", { key: '69bb7842109760c51e1122963cb56f0eba8454a0', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'f6a133615ab877293398de65f3b0004c0234f161', class: "col-ctrl-input", type: "number", value: this.h, onInputChange: (v) => this.handleHsvChange('h', parseInt(v.detail)), variant: "plain" }), h("span", { key: 'e00ac8771d5c0f6a08d93fd3f1c1b85b6014edca', class: "col-ctrl-unit" }, "\u00B0"))), h("div", { key: '2fd071bc5741f47cbf40b6664332c6f63e684091', class: "col-ctrl-row" }, h("span", { key: '375c1767c1631f1f5aa0095606c9e50b350443f2', class: "col-ctrl-key" }, "S"), h("div", { key: '3c41e3f98fc37ab7a2af5f3a57dfa7bb05427744', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '3f2a4a152681231156b1b82091fd08b78d6cba2f', class: "col-ctrl-input", type: "number", value: this.s, onInputChange: (v) => this.handleHsvChange('s', parseInt(v.detail)), variant: "plain" }), h("span", { key: '3c33faf1a4ffe99ebe5cde064c024034b691ad1f', class: "col-ctrl-unit" }, "%"))), h("div", { key: '2e49ebd592ade20e0e7660b10416b656312347e0', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '874e0da90ed96b03c7955ac6650c75b039ea886a', class: "col-ctrl-key" }, "V"), h("div", { key: '7ef1fd0da2ea55c460643e464a0a06bd4ae2d280', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '11cb688038ce67cee9c29b091498b7967674b7fa', class: "col-ctrl-input", type: "number", value: this.v, onInputChange: (v) => this.handleHsvChange('v', parseInt(v.detail)), variant: "plain" }), h("span", { key: '09449462dbba86a0fd33b862f42590209218b9e2', class: "col-ctrl-unit" }, "%"))), h("div", { key: 'c16ecc86f52bbb01edea970400c2128d86384a70', class: "col-ctrl-row" }, h("span", { key: '53fa2cd839dc048567e3aed4fe6ce766d7005577', class: "col-ctrl-key" }, "R"), h("div", { key: 'bcf8bf7833c0dc0030d99b28af56b0bc430fd708', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'a498ca548a2529505bae7161659f50b4e5641678', class: "col-ctrl-input", type: "number", value: this.r, onInputChange: (v) => this.handleRgbChange('r', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '516aff05554aad71cc012a9905dad96d5e03b91e', class: "col-ctrl-row" }, h("span", { key: '2c234e6e2f2111724cf603a76303a965b2277c17', class: "col-ctrl-key" }, "G"), h("div", { key: '85339e47bcd95bf20f6e7ae42ac5d29739e8d05a', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'd705b336aaceb110e92a9a63c000bfc19c9bdb17', class: "col-ctrl-input", type: "number", value: this.g, onInputChange: (v) => this.handleRgbChange('g', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '033523f4276729ee119fe4ad793e02850c288831', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '66fd8bdd0d2dd540fb591d02ebc3240913477b52', class: "col-ctrl-key" }, "B"), h("div", { key: '1cfa29786007a7c1292817b914cb573f0a69f1b8', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'b6c51663d914adb081819c23fb8e7915be7b50cb', class: "col-ctrl-input", type: "number", value: this.b, onInputChange: (v) => this.handleRgbChange('b', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '4c43173acd72a63dcb2e3ea5759d05bceebd6087', class: "col-ctrl-row hex-row" }, h("span", { key: '3d742b9ca0c5956498a6787171a22fbdb0e87a12', class: "col-ctrl-key" }, "#"), h("div", { key: '294d48fc7bb69c9dda1a36788b6e712725fda674', class: "col-ctrl-input-wrapper hex-wrapper" }, h("ui-input", { key: '051e90c5e2814ba7a5ae6cb542e379f343cf29ea', class: "col-ctrl-input hex-input", value: this.hex, onInputChange: (v) => this.handleHexInput({ detail: { value: v.detail } }), variant: "plain" }))))));
-    }
-    static get watchers() { return {
-        "value": [{
-                "handleValueUpdate": 0
-            }]
-    }; }
-};
-ColorController.style = colorControllerCss();
-
-export { ColorController as ui_color_controller };

package/dist/esm/ui-image-button.entry.js

@@ -1,65 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DUsoYu9r.js';
-
-const imageButtonCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:inline-block;vertical-align:middle;transition:transform 0.2s ease}.image-button{position:relative;overflow:hidden;border-radius:12px;cursor:pointer;background:#f3f4f6;width:100%;height:100%;display:flex;align-items:center;justify-content:center;outline:none}.image-button,.image-button *{transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1)}.image-button-sm{width:120px}.image-button-md{width:240px}.image-button-lg{width:360px}.image-button-xl{width:480px}.image-button-ratio-square{aspect-ratio:1/1}.image-button-ratio-video{aspect-ratio:16/9}.image-button-ratio-portrait{aspect-ratio:3/4}.image-button-ratio-auto{height:auto}.image-button .button-image{width:100%;height:100%;object-fit:cover;display:block}.image-button .image-placeholder{color:#9ca3af}.image-button .button-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%);display:flex;align-items:flex-end;padding:1.25rem;color:white}.image-button .overlay-content{display:flex;flex-direction:column;gap:4px}.image-button .button-label{font-weight:700;font-size:1.1rem;line-height:1.2;letter-spacing:-0.01em}.image-button .button-desc{font-size:0.85rem;opacity:0.8}.image-button-effect-zoom:hover .button-image{transform:scale(1.1)}.image-button-effect-lift:hover,.image-button-effect-lift.is-focused{transform:translateY(-8px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)}.image-button-effect-brighten:hover .button-image{filter:brightness(1.2)}.image-button.label-mode-hover .button-overlay{opacity:0;transform:translateY(10px)}.image-button.label-mode-hover:hover .button-overlay{opacity:1;transform:translateY(0)}.image-button.is-disabled{cursor:not-allowed;opacity:0.6;filter:grayscale(1)}.image-button.is-disabled:hover{transform:none;box-shadow:none}.image-button.is-loading{cursor:wait}.image-button.is-loading .loading-overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.7);display:flex;align-items:center;justify-content:center;color:#10b981;z-index:10}.image-button.is-focused{box-shadow:0 0 0 2px var(--bg-primary, #ffffff), 0 0 0 5px var(--color-primary, #10b981);z-index:10}@media (max-width: 640px){.image-button{width:100% !important}}`;
-
-const ImageButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.uiClick = createEvent(this, "uiClick");
-    }
-    /** Image source URL */
-    src;
-    /** Image alt text */
-    alt = '';
-    /** Button label (overlay) */
-    label;
-    /** Subtitle or secondary text */
-    description;
-    /** Hover effect: 'zoom' | 'lift' | 'brighten' | 'none' */
-    effect = 'zoom';
-    /** Aspect ratio: 'square' | 'video' | 'portrait' | 'auto' */
-    ratio = 'square';
-    /** Whether the label is always visible or only on hover */
-    labelMode = 'hover';
-    /** Size variant */
-    size = 'md';
-    /** Disabled state */
-    disabled = false;
-    /** Loading state */
-    loading = false;
-    /** Accessibility label */
-    a11yLabel;
-    /** Focus state for keyboard accessibility */
-    isFocused = false;
-    uiClick;
-    handleClick = (e) => {
-        if (this.disabled || this.loading) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        this.uiClick.emit();
-    };
-    handleKeyDown = (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            this.handleClick(e);
-        }
-    };
-    render() {
-        const classes = {
-            'image-button': true,
-            [`image-button-${this.size}`]: true,
-            [`image-button-ratio-${this.ratio}`]: true,
-            [`image-button-effect-${this.effect}`]: true,
-            [`label-mode-${this.labelMode}`]: true,
-            'is-disabled': this.disabled,
-            'is-loading': this.loading,
-            'is-focused': this.isFocused,
-        };
-        return (h(Host, { key: '9f62fc59b4656078cbddd73750e41d03a0f3d2ca' }, h("div", { key: 'd6f464e2f65dd0eb5dd40892179432473b3836fe', class: classes, role: "button", tabindex: this.disabled || this.loading ? -1 : 0, "aria-label": this.a11yLabel || this.label || this.alt || 'Image Button', "aria-disabled": this.disabled ? 'true' : 'false', "aria-busy": this.loading ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false }, this.src ? (h("img", { class: "button-image", src: this.src, alt: this.alt, loading: "lazy" })) : (h("div", { class: "image-placeholder" }, h("ui-icon", { name: "image", library: "fontawesome", size: "24px" }))), (this.label || this.description) && (h("div", { key: '4f8ce2e322361f645f29bf9c4f48f4c9b151f075', class: "button-overlay" }, h("div", { key: 'f3e15b029509d4ed27bef5c03d75d3bd934f190b', class: "overlay-content" }, this.label && h("div", { key: 'aac7cac7d8e07014a927acd9f572f7dac2688e3d', class: "button-label" }, this.label), this.description && h("div", { key: '1607a06a9fcde90277be03130548d974bf7c6b5c', class: "button-desc" }, this.description)))), this.loading && (h("div", { key: '9c9f38dbeb6b77fb2d8eed4ab641498aa5030bf7', class: "loading-overlay" }, h("ui-icon", { key: '2bc1e06c7a61a4e7752686d489ea2c092550d2b4', name: "spinner", library: "fontawesome", spin: true, size: "24px" }))))));
-    }
-};
-ImageButton.style = imageButtonCss();
-
-export { ImageButton as ui_image_button };

package/dist/esm/ui-input-pair.entry.js

@@ -1,42 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-DUsoYu9r.js';
-
-const inputPairCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;width:auto;min-width:0;--pair-radius:10px}:host.full-width{width:100%}.pair-main-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-secondary, #64748b));margin-bottom:8px}.pair-container{display:flex;align-items:flex-end;width:100%}.pair-container .input-item{flex:1;min-width:0}.pair-container{}.pair-container .input-item.left ui-input::part(container),.pair-container .input-item.right ui-input::part(container){border-radius:var(--pair-radius);border-width:1.5px}.pair-container.is-connected .input-item.left ui-input::part(container){border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0.75px}.pair-container.is-connected .input-item.right ui-input::part(container){border-top-left-radius:0;border-bottom-left-radius:0;border-left-width:0.75px}`;
-
-const InputPair = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /** Left input label */
-    labelLeft = '';
-    /** Right input label */
-    labelRight = '';
-    /** Shared main label (optional) */
-    label;
-    /** Left input value */
-    valueLeft = '';
-    /** Right input value */
-    valueRight = '';
-    /** Left input placeholder */
-    placeholderLeft = '';
-    /** Right input placeholder */
-    placeholderRight = '';
-    /** Shared type for both inputs */
-    type = 'text';
-    /** Shared variant */
-    variant = 'outlined';
-    /** Shared size */
-    size = 'md';
-    /** Gap between inputs (set to 0 for connected) */
-    gap = '0';
-    /** Full width behavior */
-    fullWidth = false;
-    render() {
-        return (h(Host, { key: 'fdf7f4502e0ae69ee732870df215948f6dd343d4', class: { 'full-width': this.fullWidth } }, this.label && h("div", { key: 'fab76ee80e86ffb845930a8b2ce26d210da9e72c', class: "pair-main-label" }, this.label), h("div", { key: 'cb95a4fda33d88723248c58d57e526f9ab7fc1c6', class: {
-                'pair-container': true,
-                'is-connected': this.gap === '0'
-            }, style: { gap: this.gap !== '0' ? this.gap : undefined } }, h("div", { key: '562af03d33b4c7ec4f55ffa805dbbda5fa0e2c95', class: "input-item left" }, h("ui-input", { key: 'c75ac1faec6b8b0903d578064ba60529a923d4eb', label: this.labelLeft, placeholder: this.placeholderLeft, value: this.valueLeft, type: this.type, variant: this.variant, size: this.size, "full-width": true })), h("div", { key: '2740efa73d5758bf88c58f2853cba1da3f43a420', class: "input-item right" }, h("ui-input", { key: '4e110393af0e26ace0de9a68f12a9cb54b90d935', label: this.labelRight, placeholder: this.placeholderRight, value: this.valueRight, type: this.type, variant: this.variant, size: this.size, "full-width": true })))));
-    }
-};
-InputPair.style = inputPairCss();
-
-export { InputPair as ui_input_pair };