atomicuilibrary 0.0.1 → 0.1.0

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

@@ -1,205 +0,0 @@
-'use strict';
-
-var index = require('./index-ClkOYpT8.js');
-
-const radioGroupCss = () => `.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}.radio-group{display:flex;flex-direction:column;gap:12px;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}.radio-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-primary));margin-bottom:8px}.radio-search{position:relative;margin-bottom:8px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.radio-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}.radio-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)}.radio-search .search-icon{margin-inline-start:12px;opacity:0.4;font-size:16px;color:var(--primary-color)}.radio-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}.radio-search input.search-input::placeholder{opacity:0.5}.radio-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-inline-end:6px;color:var(--text-secondary);transition:all 0.2s}.radio-search .clear-search:hover{background:rgba(0, 0, 0, 0.1);color:var(--text-primary);transform:scale(1.1)}.radio-search .clear-search ui-icon{font-size:14px}.no-results{font-size:13px;color:var(--text-secondary);padding:12px 0;font-style:italic;opacity:0.7}.required-indicator{color:var(--color-danger-hover, #dc2626);margin-inline-start:4px}.radio-list{display:flex}.radio-list-vertical{flex-direction:column}.radio-list-horizontal{flex-direction:row;flex-wrap:wrap}.radio-list-grid{display:grid}.radio-group-button .radio-list{gap:0;border-radius:10px;overflow:hidden;border:1px solid var(--border-subtle, #e2e8f0);width:fit-content}.radio-group-button ui-radio:not(:first-child){margin-inline-start:-1px}.radio-group-button ui-radio{display:flex;flex:1}.radio-group-button .radio-list-vertical{flex-direction:column;width:100%}.radio-group-button .radio-list-vertical ui-radio:not(:first-child){margin-inline-start:0;margin-top:-1px}.radio-group-button .radio-list-vertical ui-radio:first-child{border-top-left-radius:10px;border-top-right-radius:10px}.radio-group-button .radio-list-vertical ui-radio:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px}.radio-group-button .radio-list-horizontal ui-radio:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}.radio-group-button .radio-list-horizontal ui-radio:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}.radio-group-skeleton .radio-group-label{background:var(--bg-primary, #e5e7eb);color:transparent;border-radius:4px;width:150px}.helper-text{font-size:0.875rem;color:var(--label-subtitle-color, var(--text-muted, #6b7280));display:flex;align-items:center;gap:4px;margin-top:4px}.helper-text.error{color:var(--color-danger-hover, #dc2626)}.radio-group-disabled{opacity:0.6;pointer-events:none}.radio-group-invalid .radio-group-label{color:var(--color-danger-hover, #dc2626)}`;
-
-const RadioGroup = class {
-    internals;
-    get el() { return index.getElement(this); }
-    value = '';
-    name = '';
-    disabled = false;
-    readonly = false;
-    required = false;
-    invalid = false;
-    label = '';
-    helperText = '';
-    errorMessage = '';
-    layout = 'vertical';
-    columns = 2;
-    gap = '16px';
-    size = 'md';
-    color = 'primary';
-    options = [];
-    labelPosition = 'right';
-    enableAnimation = true;
-    rippleEffect = true;
-    buttonGroup = false;
-    variant = 'default';
-    skeleton = false;
-    allowEmpty = false;
-    showDot = true;
-    /** Entrance animation */
-    reveal = 'none';
-    /** Delay for entry animation (ms) */
-    revealDelay = 0;
-    /** Stagger delay between items */
-    revealStagger = 60;
-    /** High-Fidelity: Searchable options */
-    searchable = false;
-    /** High-Fidelity: Search bar placeholder */
-    searchPlaceholder = 'Search items...';
-    /** High-Fidelity: RTL support */
-    rtl = false;
-    radios = [];
-    searchQuery = '';
-    radioGroupChange;
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.radioGroupChange = index.createEvent(this, "radioGroupChange");
-        this.internals = this.el.attachInternals();
-    }
-    componentWillLoad() {
-        this.updateOptions();
-        this.internals.setFormValue(this.value);
-    }
-    componentDidLoad() {
-        this.syncRadios();
-    }
-    componentDidUpdate() {
-        this.syncRadios();
-    }
-    watchValue() {
-        this.syncRadios();
-    }
-    updateOptions() {
-        let newRadios = [];
-        if (typeof this.options === 'string') {
-            try {
-                newRadios = JSON.parse(this.options);
-            }
-            catch {
-                console.error('Invalid options JSON');
-                newRadios = [];
-            }
-        }
-        else if (Array.isArray(this.options)) {
-            newRadios = [...this.options];
-        }
-        if (JSON.stringify(this.radios) !== JSON.stringify(newRadios)) {
-            this.radios = newRadios;
-        }
-    }
-    handleRadioClick(event) {
-        if (!this.allowEmpty)
-            return;
-        // Handle both Shadow DOM and Light DOM targets
-        // Handle both Shadow DOM and Light DOM targets
-        const target = (event.target.closest('ui-radio') ||
-            (event.composedPath && event.composedPath().find((el) => el.tagName === 'UI-RADIO')));
-        if (target && !target.disabled && !this.disabled) {
-            // If clicking the currently selected radio
-            if (target.value === this.value) {
-                // Prevent default to stop native radio from enforcing checked state (though it usually stays checked)
-                event.preventDefault();
-                event.stopPropagation();
-                this.value = '';
-                this.radioGroupChange.emit({ value: '' });
-            }
-        }
-    }
-    handleRadioChange(event) {
-        // Update the group's value when a child radio is checked
-        const { checked, value } = event.detail;
-        if (checked) {
-            this.value = value;
-            this.internals.setFormValue(value);
-            this.updateValidity();
-            this.radioGroupChange.emit({ value });
-        }
-    }
-    updateValidity() {
-        if (this.required && !this.value) {
-            this.internals.setValidity({ valueMissing: true }, 'Please select an option.', this.el);
-        }
-        else {
-            this.internals.setValidity({});
-        }
-    }
-    /**
-     * Checks the component's validity.
-     */
-    async checkValidity() {
-        return this.internals.checkValidity();
-    }
-    /**
-     * Reports the component's validity.
-     */
-    async reportValidity() {
-        return this.internals.reportValidity();
-    }
-    getRadios() {
-        const shadowRadios = Array.from(this.el.shadowRoot.querySelectorAll('ui-radio'));
-        const lightRadios = Array.from(this.el.querySelectorAll('ui-radio'));
-        return [...shadowRadios, ...lightRadios];
-    }
-    syncRadios() {
-        const radios = this.getRadios();
-        radios.forEach((radio, index) => {
-            radio.checked = radio.value === this.value;
-            radio.isButton = this.buttonGroup;
-            radio.variant = this.variant;
-            radio.skeleton = this.skeleton;
-            radio.name = this.name; // Propagate name
-            radio.reveal = this.reveal;
-            radio.revealDelay = this.revealDelay + (index * this.revealStagger);
-            radio.rtl = this.rtl;
-        });
-    }
-    renderLabel() {
-        if (!this.label)
-            return null;
-        return (index.h("div", { class: "radio-group-label" }, this.label, this.required && index.h("span", { class: "required-indicator" }, "*")));
-    }
-    renderSearch() {
-        if (!this.searchable)
-            return null;
-        return (index.h("div", { class: {
-                'radio-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("ui-input", { type: "text", placeholder: this.searchPlaceholder, onInputChange: (e) => { this.searchQuery = e.detail.toLowerCase(); }, value: this.searchQuery, size: "sm", fullWidth: true }), this.searchQuery.length > 0 && (index.h("ui-button", { variant: "ghost", class: "clear-search", onClick: () => { this.searchQuery = ''; }, ariaLabel: "Clear search", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })))));
-    }
-    render() {
-        const visibleOptions = Array.isArray(this.radios) ? this.radios.filter(opt => !this.searchQuery || opt.label.toLowerCase().includes(this.searchQuery)) : [];
-        const containerClasses = {
-            'radio-group': true,
-            [`radio-group-${this.layout}`]: true,
-            'radio-group-disabled': this.disabled,
-            'radio-group-invalid': this.invalid,
-            'radio-group-button': this.buttonGroup,
-            [`radio-group-variant-${this.variant}`]: true,
-            'radio-group-skeleton': this.skeleton,
-        };
-        const radioListClasses = {
-            'radio-list': true,
-            [`radio-list-${this.layout}`]: true,
-        };
-        const listStyle = {
-            ...(this.layout === 'grid' ? { 'grid-template-columns': `repeat(${this.columns}, 1fr)` } : {}),
-            'gap': this.gap
-        };
-        return (index.h("div", { key: '8f4bf0db359a75ef98dfb5719adbd6b70fea3c38', class: containerClasses, role: "radiogroup", "aria-label": this.label, dir: this.rtl ? 'rtl' : 'ltr' }, this.renderLabel(), this.renderSearch(), index.h("div", { key: '6eb5c03abf60138dd6b20b7830fdc80310729bf8', class: radioListClasses, style: listStyle }, index.h("slot", { key: 'bdc217a91c554f749634d0b9ba2965b1f626ee27' }), visibleOptions.length === 0 && this.searchQuery && (index.h("div", { key: 'f7dd1dc1cda443e0877a64c5e04cba402f905c6f', class: "no-results" }, "No matches found")), visibleOptions.map((option, idx) => (index.h("ui-radio", { value: option.value, label: option.label, description: option.description, badge: option.badge, tooltip: option.tooltip, "tooltip-position": option.tooltipPosition, name: this.name, checked: this.value === option.value, disabled: this.disabled || option.disabled, readonly: this.readonly, invalid: this.invalid, size: this.size, color: this.color, "label-position": this.labelPosition, "show-dot": this.showDot, "enable-animation": this.enableAnimation, "ripple-effect": this.rippleEffect, "is-button": this.buttonGroup, variant: this.variant, skeleton: this.skeleton, reveal: this.reveal, "reveal-delay": this.revealDelay + (idx * this.revealStagger), rtl: this.rtl })))), this.renderHelperText()));
-    }
-    renderHelperText() {
-        if (this.invalid && this.errorMessage) {
-            return (index.h("div", { class: "helper-text error" }, index.h("ui-icon", { library: "lucide", name: "alert-circle", size: "14px" }), this.errorMessage));
-        }
-        if (this.helperText) {
-            return index.h("div", { class: "helper-text" }, this.helperText);
-        }
-        return null;
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "value": [{
-                "watchValue": 0
-            }],
-        "options": [{
-                "updateOptions": 0
-            }]
-    }; }
-};
-RadioGroup.style = radioGroupCss();
-
-exports.ui_radio_group = RadioGroup;

package/dist/cjs/ui-radio.cjs.entry.js

@@ -1,206 +0,0 @@
-'use strict';
-
-var index = require('./index-ClkOYpT8.js');
-var componentSize = require('./component-size-DsYFUZcz.js');
-
-const radioCss = () => `.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}.radio-badge{display:inline-block;min-width:18px;height:18px;padding:0 6px;background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff);font-size:10px;font-weight:700;border-radius:9px;margin-inline-start:8px;vertical-align:middle;text-align:center;line-height:18px;box-shadow:0 2px 4px rgba(var(--color-success-rgb, 61, 205, 88), 0.2)}[class*=radio-reveal-]{opacity:0;animation-fill-mode:forwards;animation-delay:var(--reveal-delay, 0ms)}.radio-reveal-fade-in{animation:radio-fade-in 0.6s ease-out forwards}.radio-reveal-slide-up{animation:radio-slide-up 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards}.radio-reveal-zoom{animation:radio-zoom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards}@keyframes radio-fade-in{from{opacity:0}to{opacity:1}}@keyframes radio-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes radio-zoom{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}.radio-tooltip{position:absolute;background:var(--bg-primary, #1f2937);color:var(--text-standard, #ffffff);padding:6px 12px;border-radius:6px;font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:10}.radio-input-wrapper:hover .radio-tooltip{opacity:1}.radio-tooltip-top{bottom:calc(100% + 10px);left:50%;transform:translateX(-50%)}.radio-tooltip-bottom{top:calc(100% + 10px);left:50%;transform:translateX(-50%)}.radio-tooltip-left{inset-inline-end:calc(100% + 10px);top:50%;transform:translateY(-50%)}.radio-tooltip-right{inset-inline-start:calc(100% + 10px);top:50%;transform:translateY(-50%)}:host{display:block;overflow:hidden;--ui-radio-border:var(--border-strong, #94a3b8);--ui-radio-bg:var(--bg-primary, #ffffff);--ui-radio-label:var(--label-color, var(--text-primary, #111827));--ui-radio-description:var(--label-subtitle-color, var(--text-secondary, #6b7280));--ui-radio-circle-hover:rgba(0, 0, 0, 0.05)}:host-context(.dark),:host-context([data-theme=dark]),:host-context([data-theme=violet]),:host-context([data-theme=pink]),:host-context([data-theme=blue]),:host-context([data-theme=green]),:host(.dark){--ui-radio-border:var(--border-default, #64748b);--ui-radio-bg:var(--bg-secondary, #111827);--ui-radio-circle-hover:rgba(255, 255, 255, 0.05)}.radio-container{display:inline-flex;flex-direction:column;width:100%;box-sizing:border-box;font-family:inherit;color:var(--text-primary)}.radio-container.radio-rtl{direction:rtl}.radio-label{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;position:relative;box-sizing:border-box;flex-shrink:0;overflow:visible;}.radio-label *{box-sizing:border-box}.radio-container.radio-disabled .radio-label{cursor:not-allowed;opacity:0.6}.radio-container.radio-readonly .radio-label{cursor:default}.label-section{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0}.label-section.is-side{flex-direction:row;align-items:baseline;gap:8px}.label-section.is-side .radio-description{margin-top:0}.radio-description{font-size:0.75rem;opacity:0.7;font-weight:400;line-height:1.1;margin-top:2px;color:var(--ui-radio-description)}.radio-input-wrapper{flex-shrink:0;overflow:visible}.radio-input{position:absolute;opacity:0;cursor:pointer;width:100%;height:100%;margin:0;padding:0;z-index:1;appearance:none;-webkit-appearance:none;-moz-appearance:none}.radio-circle{position:relative;display:flex;align-items:center;justify-content:center;border:2px solid var(--ui-radio-border);background:var(--ui-radio-bg);border-radius:50%;transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);box-sizing:border-box;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}.radio-circle .glow-layer{position:absolute;inset:-4px;background:currentColor;opacity:0;filter:blur(12px);transition:opacity 0.4s ease;border-radius:inherit;z-index:-1;pointer-events:none}.radio-glow.radio-checked .radio-circle .glow-layer{opacity:0.4}.radio-xxxs .radio-circle{width:12px;height:12px}.radio-xxxs .radio-dot{width:6px;height:6px}.radio-xxxs .radio-label-text{font-size:11px;line-height:16px}.radio-xxs .radio-circle{width:14px;height:14px}.radio-xxs .radio-dot{width:7px;height:7px}.radio-xxs .radio-label-text{font-size:12px;line-height:18px}.radio-xs .radio-circle{width:16px;height:16px}.radio-xs .radio-dot{width:8px;height:8px}.radio-xs .radio-label-text{font-size:13px;line-height:20px}.radio-sm .radio-circle{width:18px;height:18px}.radio-sm .radio-dot{width:9px;height:9px}.radio-sm .radio-label-text{font-size:14px;line-height:20px}.radio-md .radio-circle{width:20px;height:20px}.radio-md .radio-dot{width:10px;height:10px}.radio-md .radio-label-text{font-size:15px;line-height:24px}.radio-lg .radio-circle{width:24px;height:24px}.radio-lg .radio-dot{width:12px;height:12px}.radio-lg .radio-label-text{font-size:16px;line-height:28px}.radio-xl .radio-circle{width:28px;height:28px}.radio-xl .radio-dot{width:14px;height:14px}.radio-xl .radio-label-text{font-size:18px;line-height:32px}.radio-xxl .radio-circle{width:32px;height:32px;border-radius:50% !important}.radio-xxl .radio-dot{width:16px;height:16px}.radio-xxl .radio-label-text{font-size:20px;line-height:36px}.radio-xxxl .radio-circle{width:40px;height:40px;border-radius:50% !important}.radio-xxxl .radio-dot{width:20px;height:20px}.radio-xxxl .radio-label-text{font-size:24px;line-height:44px}.radio-dot-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:0;transform:scale(0);transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events:none}.radio-dot-container.radio-dot-visible{opacity:1;transform:scale(1)}.radio-dot{border-radius:50%;background:currentColor}.custom-radio-image{width:100%;height:100%;object-fit:contain;border-radius:50%;padding:4px}.custom-icon{display:flex;align-items:center;justify-content:center;font-size:12px;color:currentColor}.radio-animate .radio-checked .radio-dot,.radio-animate .radio-checked .custom-icon{animation:radio-pop 0.3s ease}@keyframes radio-pop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}.radio-variant-bordered .radio-label{padding:12px 16px;border:1px solid var(--border-color);border-radius:12px;transition:all 0.2s ease;width:100%}.radio-variant-bordered .radio-label:hover:not(.radio-disabled){border-color:currentColor;background:rgba(0, 0, 0, 0.02)}.radio-variant-bordered.radio-checked .radio-label{border-color:currentColor;background:rgba(var(--primary-rgb, 61, 205, 88), 0.05);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.radio-variant-underlined .radio-label{padding:12px 4px;border-bottom:2px solid transparent;transition:all 0.2s ease;border-radius:0;width:100%;box-sizing:border-box}.radio-variant-underlined.radio-checked .radio-label{border-bottom-color:currentColor}.radio-variant-card .radio-label{padding:20px;border:2px solid var(--border-color);border-radius:16px;background:var(--surface-color);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 6px rgba(0, 0, 0, 0.02);width:100%;box-sizing:border-box}.radio-variant-card .radio-label:hover:not(.radio-disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.08);border-color:var(--border-color-hover, #cbd5e1)}.radio-variant-card.radio-checked .radio-label{border-color:currentColor;background:rgba(var(--primary-rgb, 61, 205, 88), 0.02);box-shadow:0 12px 32px rgba(0, 0, 0, 0.1)}.radio-variant-card.radio-checked:hover .radio-label{transform:translateY(-2px)}.radio-variant-glass .radio-circle{background:rgba(255, 255, 255, 0.1) !important;backdrop-filter:blur(8px);border-color:rgba(255, 255, 255, 0.2) !important;border-width:1.5px}.radio-variant-glass.radio-checked .radio-circle{background:currentColor !important;backdrop-filter:none}.radio-variant-raised .radio-circle{border-color:rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05) !important}.radio-skeleton{pointer-events:none}.radio-skeleton .radio-circle{background:var(--bg-primary, #e5e7eb);border-color:var(--border-default, #e5e7eb) !important}.radio-skeleton .radio-label-text,.radio-skeleton .radio-description{background:var(--bg-primary, #e5e7eb);color:transparent !important;border-radius:4px;width:fit-content;min-width:120px}.radio-skeleton .radio-description{min-width:180px}.radio-skeleton .radio-label{position:relative;overflow:hidden}.radio-skeleton-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:radio-shimmer 1.5s infinite}@keyframes radio-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.radio-primary .radio-circle{border-color:var(--color-primary, #93c5fd)}.radio-primary .radio-checked .radio-circle{border-color:var(--primary-color);color:var(--primary-color)}.radio-secondary .radio-circle{border-color:var(--border-strong, #d1d5db)}.radio-secondary .radio-checked .radio-circle{border-color:var(--color-primary, #6b7280);color:var(--text-muted, #6b7280)}.radio-success .radio-circle{border-color:var(--color-success, #86efac)}.radio-success .radio-checked .radio-circle{border-color:var(--color-success, #16a34a);color:var(--color-success, #16a34a)}.radio-danger .radio-circle{border-color:var(--color-danger, #fca5a5)}.radio-danger .radio-checked .radio-circle{border-color:var(--color-danger-hover, #dc2626);color:var(--color-danger-hover, #dc2626)}.radio-warning .radio-circle{border-color:var(--color-danger, #fcd34d)}.radio-warning .radio-checked .radio-circle{border-color:var(--color-warning, #f59e0b);color:var(--color-warning, #f59e0b)}.radio-info .radio-circle{border-color:var(--color-primary, #67e8f9)}.radio-info .radio-checked .radio-circle{border-color:var(--color-info-hover, #0891b2);color:var(--color-info-hover, #0891b2)}.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px currentColor}.radio-primary.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-success, #3dcd58)}.radio-secondary.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-primary, #6b7280)}.radio-success.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-success, #16a34a)}.radio-danger.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-danger-hover, #dc2626)}.radio-warning.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-warning, #f59e0b)}.radio-info.radio-focused .radio-circle{box-shadow:0 0 0 2px var(--surface-color), 0 0 0 4px var(--color-info-hover, #0891b2)}.radio-hovered:not(.radio-disabled):not(.radio-readonly) .radio-circle{border-color:currentColor;box-shadow:0 0 0 4px rgba(0, 0, 0, 0.05)}.radio-primary.radio-hovered .radio-circle{border-color:var(--color-success, #3dcd58)}.radio-secondary.radio-hovered .radio-circle{border-color:var(--color-primary, #6b7280)}.radio-success.radio-hovered .radio-circle{border-color:var(--color-success, #16a34a)}.radio-danger.radio-hovered .radio-circle{border-color:var(--color-danger-hover, #dc2626)}.radio-warning.radio-hovered .radio-circle{border-color:var(--color-warning, #f59e0b)}.radio-info.radio-hovered .radio-circle{border-color:var(--color-info-hover, #0891b2)}.radio-ripple .radio-circle::before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%, -50%) scale(0);background:rgba(0, 0, 0, 0.1);pointer-events:none}.radio-ripple .radio-input:active~.radio-circle::before{animation:ripple 0.6s ease}@keyframes ripple{0%{transform:translate(-50%, -50%) scale(0);opacity:1}100%{transform:translate(-50%, -50%) scale(3);opacity:0}}.radio-label-content{display:flex;flex-direction:column;gap:4px}.radio-label-text{color:var(--ui-radio-label);font-weight:500;line-height:1.4}.radio-description{color:var(--ui-radio-description);font-size:0.875rem;line-height:1.4}.radio-invalid .radio-circle{border-color:var(--color-danger-hover, #dc2626)}.radio-is-button{width:100%;height:100%;overflow:inherit}.radio-is-button .radio-label{padding:8px 16px;justify-content:center;background:var(--surface-color);transition:all 0.2s ease;width:100%;height:100%;border-radius:inherit}.radio-is-button .radio-label:hover:not(.radio-disabled){background:var(--bg-secondary, #f3f4f6)}.radio-is-button .radio-circle{margin-inline-end:8px;transform:scale(0.85)}.radio-is-button.radio-checked .radio-label{background:var(--primary-color);color:var(--color-primary-text, #ffffff);z-index:1;border-color:var(--primary-color)}.radio-is-button.radio-secondary.radio-checked .radio-label{background:var(--color-primary, #6b7280);border-color:var(--color-primary, #6b7280)}.radio-is-button.radio-success.radio-checked .radio-label{background:var(--color-success, #16a34a);border-color:var(--color-success, #16a34a)}.radio-is-button.radio-danger.radio-checked .radio-label{background:var(--color-danger-hover, #dc2626);border-color:var(--color-danger-hover, #dc2626)}.radio-is-button.radio-warning.radio-checked .radio-label{background:var(--color-warning, #f59e0b);border-color:var(--color-warning, #f59e0b)}.radio-is-button.radio-info.radio-checked .radio-label{background:var(--color-info-hover, #0891b2);border-color:var(--color-info-hover, #0891b2)}.radio-is-button.radio-disabled .radio-label{background:var(--bg-primary, #f9fafb);color:var(--text-muted, #9ca3af)}`;
-
-const Radio = class {
-    internals;
-    inputElement;
-    async setFocus() {
-        this.inputElement?.focus();
-    }
-    analyticsEvent;
-    customClass;
-    badge;
-    tooltip;
-    tooltipPosition = 'top';
-    get el() { return index.getElement(this); }
-    checked = false;
-    disabled = false;
-    readonly = false;
-    invalid = false;
-    label = '';
-    description = '';
-    value = '';
-    name = '';
-    required = false;
-    size = 'md';
-    color = 'primary';
-    labelPosition = 'right';
-    showDot = true;
-    customIcon = '';
-    /** High-Fidelity: Library for custom icons */
-    customIconLibrary = 'lucide';
-    /** High-Fidelity: Custom image for dot */
-    customImage = '';
-    radioTabIndex = 0;
-    ariaLabel = '';
-    ariaDescribedBy = '';
-    enableAnimation = true;
-    rippleEffect = true;
-    skeleton = false;
-    variant = 'default';
-    isButton = false;
-    rtl = false;
-    /** Position of the descriptive text relative to the label */
-    descriptionPosition = 'bottom';
-    /** High-Fidelity: Glow effect when checked */
-    glow = false;
-    /** High-Fidelity: Enable haptic feedback */
-    haptic = false;
-    /** High-Fidelity: Haptic intensity */
-    hapticIntensity = 'light';
-    /** Entry animation when mounting */
-    reveal = 'none';
-    /** Delay for entry animation (ms) */
-    revealDelay = 0;
-    isFocused = false;
-    isHovered = false;
-    radioChange;
-    radioFocus;
-    radioBlur;
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.analyticsEvent = index.createEvent(this, "analyticsEvent");
-        this.radioChange = index.createEvent(this, "radioChange");
-        this.radioFocus = index.createEvent(this, "radioFocus");
-        this.radioBlur = index.createEvent(this, "radioBlur");
-    }
-    connectedCallback() {
-        // Assign internals after el is available
-        this.internals = this.el.attachInternals();
-    }
-    componentWillLoad() {
-        this.updateFormValue();
-        this.updateValidity();
-    }
-    componentDidLoad() {
-    }
-    handleChange = (event) => {
-        if (this.disabled || this.readonly) {
-            event.preventDefault();
-            return;
-        }
-        const target = event.target;
-        this.checked = target.checked;
-        this.radioChange.emit({
-            checked: this.checked,
-            value: this.value,
-        });
-        this.updateFormValue();
-        this.updateValidity();
-        // Elite: Haptic
-        if (this.haptic && this.checked) {
-            this.triggerHaptic(this.hapticIntensity);
-        }
-        this.analyticsEvent.emit({ checked: this.checked, value: this.value });
-    };
-    triggerHaptic(type = 'light') {
-        if (!window.navigator.vibrate)
-            return;
-        const pattern = type === 'heavy' ? [50, 20, 50] : (type === 'md' ? [30] : [10]);
-        window.navigator.vibrate(pattern);
-    }
-    handleFocus = () => {
-        if (this.disabled)
-            return;
-        this.isFocused = true;
-        this.radioFocus.emit();
-    };
-    handleBlur = () => {
-        this.isFocused = false;
-        this.radioBlur.emit();
-    };
-    handleMouseEnter = () => {
-        if (this.disabled)
-            return;
-        this.isHovered = true;
-    };
-    handleMouseLeave = () => {
-        this.isHovered = false;
-    };
-    handleKeyDown = (event) => {
-        if (this.disabled || this.readonly)
-            return;
-        if (event.key === ' ' || event.key === 'Enter') {
-            event.preventDefault();
-            if (!this.checked) {
-                this.checked = true;
-                this.radioChange.emit({
-                    checked: this.checked,
-                    value: this.value,
-                });
-            }
-        }
-    };
-    updateFormValue() {
-        this.internals.setFormValue(this.checked ? this.value : null);
-    }
-    updateValidity() {
-        if (this.required && !this.checked) {
-            this.internals.setValidity({ valueMissing: true }, 'Please check this box if you want to proceed.', this.el);
-        }
-        else {
-            this.internals.setValidity({});
-        }
-    }
-    /**
-     * Checks the component's validity.
-     */
-    async checkValidity() {
-        return this.internals.checkValidity();
-    }
-    /**
-     * Reports the component's validity.
-     */
-    async reportValidity() {
-        return this.internals.reportValidity();
-    }
-    renderDot() {
-        return (index.h("div", { class: {
-                'radio-dot-container': true,
-                'radio-dot-visible': this.checked
-            } }, this.customImage ? (index.h("img", { src: this.customImage, class: "custom-radio-image" })) : this.customIcon ? (index.h("span", { class: "custom-icon" }, index.h("ui-icon", { library: this.customIconLibrary, name: this.customIcon }))) : (index.h("div", { class: "radio-dot" }))));
-    }
-    renderLabel() {
-        if (!this.label && !this.description)
-            return null;
-        return (index.h("div", { class: `label-section is-${this.descriptionPosition}` }, this.label && index.h("span", { class: "radio-label-text" }, this.label), this.description && index.h("span", { class: "radio-description" }, this.description)));
-    }
-    render() {
-        const normalizedSize = componentSize.normalizeComponentSize(this.size, 'md');
-        const containerClasses = {
-            'radio-container': true,
-            [`radio-${normalizedSize}`]: true,
-            [`radio-${this.color}`]: true,
-            'radio-disabled': this.disabled,
-            'radio-readonly': this.readonly,
-            'radio-invalid': this.invalid,
-            'radio-focused': this.isFocused,
-            'radio-hovered': this.isHovered,
-            [`radio-label-${this.labelPosition}`]: true,
-            'radio-animate': this.enableAnimation,
-            [`radio-variant-${this.variant}`]: true,
-            'radio-skeleton': this.skeleton,
-            'radio-is-button': this.isButton,
-            'radio-checked': this.checked,
-            'radio-rtl': this.rtl,
-            'radio-glow': this.glow,
-            [`radio-reveal-${this.reveal}`]: this.reveal !== 'none',
-            ...(this.customClass ? { [this.customClass]: true } : {}),
-        };
-        const radioClasses = {
-            'radio-input-wrapper': true,
-            'radio-checked': this.checked,
-            'radio-ripple': this.rippleEffect && !this.disabled,
-        };
-        return (index.h("div", { key: '0c4ce7ac6764c4d375ba9fad698b92085fb210e8', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr', style: { '--reveal-delay': `${this.revealDelay}ms` } }, index.h("label", { key: 'cd53fbd547c5721b8f1cde8c291de8338cedc41e', class: "radio-label", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.labelPosition === 'left' || this.labelPosition === 'top') && this.renderLabel(), index.h("div", { key: 'fe2026a06d12c129b3eb17dd81ed9bc6f6b13938', class: radioClasses }, index.h("input", { key: 'd68ab326208dd78f6ba549343b68e770b9327332', type: "radio", class: "radio-input", checked: this.checked, disabled: this.disabled || this.skeleton, readonly: this.readonly, value: this.value, name: this.name, tabindex: this.radioTabIndex, "aria-label": this.ariaLabel || this.label, "aria-describedby": this.ariaDescribedBy, "aria-checked": this.checked.toString(), "aria-invalid": this.invalid.toString(), onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: el => this.inputElement = el }), index.h("div", { key: '0d1088ea92be9fa9a6264921291e7deef5cddeb6', class: "radio-circle" }, index.h("div", { key: '7f86f494d8fba0f6bd19e377df69528be4772b21', class: "glow-layer" }), this.renderDot()), this.badge && !this.skeleton && index.h("span", { key: '91b0b95ccd42b008bfc3aecede34a72759885371', class: "radio-badge" }, this.badge), this.tooltip && !this.skeleton && (index.h("div", { key: '25103349c130ec435844598f0105161008bf683b', class: `radio-tooltip radio-tooltip-${this.tooltipPosition}` }, this.tooltip))), (this.labelPosition === 'right' || this.labelPosition === 'bottom') && this.renderLabel(), this.skeleton && index.h("div", { key: '7022cb0f5cf4ca8c10e533265083eac0dfd3021d', class: "radio-skeleton-shimmer" })), (this.invalid || !this.internals.validity.valid) && (index.h("div", { key: 'b019b76af7c19c92e35dcf6349100f34b6a68a45', class: "radio-error-message", role: "alert" }, this.internals.validationMessage || 'Selection required'))));
-    }
-    static get delegatesFocus() { return true; }
-    static get formAssociated() { return true; }
-};
-Radio.style = radioCss();
-
-exports.ui_radio = Radio;

package/dist/collection/components/checkbox-group/checkbox-group.css

@@ -1,223 +0,0 @@
-.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;
-}
-
-/* Size Variants */
-.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;
-}
-
-/* Search */
-.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;
-}
-
-/* Grid Layout */
-.checkbox-group-grid .checkbox-group-items {
-  display: grid;
-}