atomicuilibrary 0.0.1 → 0.1.0

package/dist/types/types/common.d.ts

@@ -25,7 +25,7 @@ export type ComponentSize = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'small' | 'md' | 'med
 /**
  * Common visual variants
  */
-export type ComponentVariant = 'default' | 'standard' | 'outlined' | 'filled' | 'elevated' | 'soft' | 'ghost' | 'glass' | 'flat' | 'underlined' | 'bordered' | 'text' | 'gradient';
+export type ComponentVariant = 'default' | 'standard' | 'outlined' | 'filled' | 'elevated' | 'soft' | 'ghost' | 'glass' | 'flat' | 'underlined' | 'bordered' | 'text' | 'gradient' | 'status';
 /**
  * Common animation types
  */

package/dist/types/types/common.type.d.ts

@@ -162,7 +162,7 @@ export type CoreVariant =
   | 'borderless';
 export type BrandVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'surface' | 'neutral' | 'inverse';
 export type StatusVariant = 'success' | 'warning' | 'danger' | 'info' | 'error';
-export type SpecializedVariant = 'segmented' | 'minimal' | 'dots-only' | 'panel' | 'raised' | 'solid' | 'light' | 'dark' | 'color' | 'gradient';
+export type SpecializedVariant = 'segmented' | 'minimal' | 'dots-only' | 'panel' | 'raised' | 'solid' | 'light' | 'dark' | 'color' | 'gradient' | 'status';
 
 export type ComponentVariant = CoreVariant | BrandVariant | StatusVariant | SpecializedVariant;
 

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "atomicuilibrary",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/app-ui-library/app-ui-library.esm.js",
+  "unpkg": "dist/exploration-project-tailwind/exploration-project-tailwind.esm.js",
   "exports": {
     ".": {
-      "import": "./dist/app-ui-library/app-ui-library.esm.js",
-      "require": "./dist/app-ui-library/app-ui-library.cjs.js"
+      "import": "./dist/exploration-project-tailwind/exploration-project-tailwind.esm.js",
+      "require": "./dist/exploration-project-tailwind/exploration-project-tailwind.cjs.js"
     },
     "./loader": {
       "types": "./loader/index.d.ts",
@@ -43,9 +43,10 @@
     "watch:tailwind-dev": " postcss --postcss-config ./postcss.config.js src/global/app.scss -o src/styles/tailwind-optimized.css --watch",
     "clean": "npx -y rimraf dist www loader",
     "build:css": "postcss src/app.scss -o dist/app.css",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d www"
-  },
+    "version:minor": "npm version minor --no-git-tag-version",
+    "predeploy": "npm run version:minor && npm run build",
+    "deploy": "node scripts/deploy-gh-pages.cjs"
+  },
   "devDependencies": {
     "@stencil/angular-output-target": "^1.1.1",
     "@stencil/sass": "^3.2.3",

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

@@ -1,330 +0,0 @@
-'use strict';
-
-var index = require('./index-ClkOYpT8.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) {
-        index.registerInstance(this, hostRef);
-        this.groupChange = index.createEvent(this, "groupChange");
-        this.groupValidation = index.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 index.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 (index.h("div", { class: "select-all-container" }, index.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 (index.h("div", { class: "group-label" }, index.h("span", { class: "label-text" }, this.label, this.required && index.h("span", { class: "required-indicator" }, "*")), this.showSelectionCount && (index.h("span", { class: "selection-count" }, "(", this.value.length, this.max !== Infinity ? ` / ${this.max}` : '', " selected)"))));
-    }
-    renderHelperText() {
-        if (this.invalid && this.errorMessage) {
-            return (index.h("div", { class: "helper-text error" }, index.h("ui-icon", { name: "fa-exclamation-circle" }), this.errorMessage));
-        }
-        if (this.helperText) {
-            return index.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 index.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 (index.h("div", { class: {
-                'checkbox-search': true,
-                'search-active': this.searchQuery.length > 0
-            } }, index.h("div", { class: "search-input-wrapper" }, index.h("ui-icon", { name: "search", library: "lucide", class: "search-icon" }), index.h("input", { type: "text", placeholder: this.searchPlaceholder, onInput: this.handleSearch, value: this.searchQuery, class: "search-input" }), this.searchQuery.length > 0 && (index.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 index.h("div", { class: "no-results" }, "No options found");
-        }
-        const valueArr = this.normalizeValue(this.value);
-        return visibleOptions.map((opt, index$1) => (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$1 * 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 (index.h("div", { key: '05a2da58c9dd7f3438076d3beb725f3596545cb6', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.renderLabel(), this.renderSearch(), this.renderSelectAll(), index.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() : index.h("slot", null)), this.renderHelperText()));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "value": [{
-                "handleValueChange": 0
-            }]
-    }; }
-};
-CheckboxGroup.style = checkboxGroupCss();
-
-exports.ui_checkbox_group = CheckboxGroup;

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

@@ -1,67 +0,0 @@
-'use strict';
-
-var index = require('./index-ClkOYpT8.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) {
-        index.registerInstance(this, hostRef);
-        this.uiClick = index.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 (index.h(index.Host, { key: '9f62fc59b4656078cbddd73750e41d03a0f3d2ca' }, index.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 ? (index.h("img", { class: "button-image", src: this.src, alt: this.alt, loading: "lazy" })) : (index.h("div", { class: "image-placeholder" }, index.h("ui-icon", { name: "image", library: "fontawesome", size: "24px" }))), (this.label || this.description) && (index.h("div", { key: '4f8ce2e322361f645f29bf9c4f48f4c9b151f075', class: "button-overlay" }, index.h("div", { key: 'f3e15b029509d4ed27bef5c03d75d3bd934f190b', class: "overlay-content" }, this.label && index.h("div", { key: 'aac7cac7d8e07014a927acd9f572f7dac2688e3d', class: "button-label" }, this.label), this.description && index.h("div", { key: '1607a06a9fcde90277be03130548d974bf7c6b5c', class: "button-desc" }, this.description)))), this.loading && (index.h("div", { key: '9c9f38dbeb6b77fb2d8eed4ab641498aa5030bf7', class: "loading-overlay" }, index.h("ui-icon", { key: '2bc1e06c7a61a4e7752686d489ea2c092550d2b4', name: "spinner", library: "fontawesome", spin: true, size: "24px" }))))));
-    }
-};
-ImageButton.style = imageButtonCss();
-
-exports.ui_image_button = ImageButton;

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

@@ -1,44 +0,0 @@
-'use strict';
-
-var index = require('./index-ClkOYpT8.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) {
-        index.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 (index.h(index.Host, { key: 'fdf7f4502e0ae69ee732870df215948f6dd343d4', class: { 'full-width': this.fullWidth } }, this.label && index.h("div", { key: 'fab76ee80e86ffb845930a8b2ce26d210da9e72c', class: "pair-main-label" }, this.label), index.h("div", { key: 'cb95a4fda33d88723248c58d57e526f9ab7fc1c6', class: {
-                'pair-container': true,
-                'is-connected': this.gap === '0'
-            }, style: { gap: this.gap !== '0' ? this.gap : undefined } }, index.h("div", { key: '562af03d33b4c7ec4f55ffa805dbbda5fa0e2c95', class: "input-item left" }, index.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 })), index.h("div", { key: '2740efa73d5758bf88c58f2853cba1da3f43a420', class: "input-item right" }, index.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();
-
-exports.ui_input_pair = InputPair;