@dropi/ui 0.1.24 → 0.1.26

package/dist/collection/components/dropi-ilustration-icon/dropi-ilustration-icon.js

@@ -1,150 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-ilustration-icon
- * Illustration icon with three modes: dropi (SVG asset), mb (colored circle), insignia (badge).
- *
- * @example
- * <dropi-ilustration-icon type="dropi" state="success"></dropi-ilustration-icon>
- * <dropi-ilustration-icon type="insignia" state-insignia="premium" tag-product></dropi-ilustration-icon>
- */
-export class DropiIlustrationIcon {
-    /** Display mode */
-    type = 'dropi';
-    /** State for dropi/mb types */
-    state = 'default';
-    /** Insignia variant */
-    stateInsignia = 'verified';
-    /** Show insignia as tag with label (for product cards) */
-    tagProduct = false;
-    insigniaIcons = {
-        verified: 'assets/icons/ilustration/verified-new.svg',
-        premium: 'assets/icons/ilustration/premium-new.svg',
-        exclusive: 'assets/icons/ilustration/exclusive.svg',
-    };
-    getIconName(state) {
-        const map = {
-            success: 'Check-circle',
-            error: 'Cross-circle',
-            info: 'Info',
-            warning: 'Info',
-        };
-        return map[state] || 'Info';
-    }
-    render() {
-        return (h("div", { key: '2f956eddb214de168aae134374512600867e77a8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '3d05624542d51f64cb6402fb958f039bc943afb7', class: "dropi-ilustration__image" }, h("img", { key: '6fb383b378d989f675433c46710e246dc193f26b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: 'f66957ddbba9506d041ab1b2e8877872b25bdbf3', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '2844c2707906bcba57835c1e7652c52769b504fe', name: this.getIconName(this.state), width: "24px", height: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: '4c091e2f415d252ae3cdaa7b62b1e4788192ae6c', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: 'dc9e11b8ecf525dbfd0c8c147a64e12350c2b6d5', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '0fa7f6fdd1bb9075d1ef2a09a6701b0b464a746b', class: `tag tag--${this.stateInsignia}` }, h("span", { key: 'dae1336fefa32471ebbc78f1bcdd0c9b1c89dcba', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
-    }
-    static get is() { return "dropi-ilustration-icon"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-ilustration-icon.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-ilustration-icon.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IlustrationType",
-                    "resolved": "\"dropi\" | \"insignia\" | \"mb\"",
-                    "references": {
-                        "IlustrationType": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
-                            "id": "src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx::IlustrationType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Display mode"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'dropi'"
-            },
-            "state": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IlustrationState",
-                    "resolved": "\"default\" | \"error\" | \"info\" | \"loading\" | \"love\" | \"sorry\" | \"success\" | \"warning\"",
-                    "references": {
-                        "IlustrationState": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
-                            "id": "src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx::IlustrationState"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "State for dropi/mb types"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "state",
-                "defaultValue": "'default'"
-            },
-            "stateInsignia": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "InsigniaState",
-                    "resolved": "\"exclusive\" | \"premium\" | \"verified\"",
-                    "references": {
-                        "InsigniaState": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
-                            "id": "src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx::InsigniaState"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Insignia variant"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "state-insignia",
-                "defaultValue": "'verified'"
-            },
-            "tagProduct": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show insignia as tag with label (for product cards)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tag-product",
-                "defaultValue": "false"
-            }
-        };
-    }
-}

package/dist/collection/components/dropi-image-miniature/dropi-image-miniature.css

@@ -1,45 +0,0 @@
-:host { display: block; }
-*, *::before, *::after { box-sizing: border-box; }
-
-.miniature__label {
-  display: block;
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-600, #475066);
-  margin-bottom: var(--Size-2, 8px);
-}
-
-.miniature__grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--Size-2, 8px);
-}
-
-.miniature__item {
-  position: relative;
-  border-radius: var(--Border-2, 8px);
-  overflow: hidden;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.miniature__item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  transition: transform 0.2s;
-}
-
-.miniature__zoom {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0,0,0,0.35);
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.miniature__item:hover img { transform: scale(1.05); }
-.miniature__item:hover .miniature__zoom { opacity: 1; }

package/dist/collection/components/dropi-image-miniature/dropi-image-miniature.js

@@ -1,150 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-image-miniature
- * Grid of image thumbnails with zoom-on-hover overlay trigger.
- */
-export class DropiImageMiniature {
-    /** Optional label above the grid */
-    label = '';
-    /** Array of image URLs. Pass as JSON string or array */
-    images = [];
-    /** Thumbnail width (CSS value) */
-    width = '88px';
-    /** Thumbnail height (CSS value) */
-    height = '88px';
-    /** Emitted when a thumbnail is clicked. e.detail = { images, index } */
-    dropiImageClick;
-    get parsedImages() {
-        if (typeof this.images === 'string') {
-            try {
-                return JSON.parse(this.images);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.images || [];
-    }
-    handleError(e) {
-        e.target.src =
-            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4OCA4OCI+PHJlY3Qgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg4IiBmaWxsPSIjZjdmOGZhIi8+PHRleHQgeD0iNDQiIHk9IjQ4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYzNjOWQ5IiBmb250LXNpemU9IjEyIj5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
-    }
-    render() {
-        const imgs = this.parsedImages;
-        return (h("div", { key: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && h("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), h("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
-    }
-    static get is() { return "dropi-image-miniature"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-image-miniature.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-image-miniature.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional label above the grid"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            },
-            "images": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string[] | string",
-                    "resolved": "string | string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Array of image URLs. Pass as JSON string or array"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "images",
-                "defaultValue": "[]"
-            },
-            "width": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Thumbnail width (CSS value)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width",
-                "defaultValue": "'88px'"
-            },
-            "height": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Thumbnail height (CSS value)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "height",
-                "defaultValue": "'88px'"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dropiImageClick",
-                "name": "dropiImageClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when a thumbnail is clicked. e.detail = { images, index }"
-                },
-                "complexType": {
-                    "original": "{ images: string[]; index: number }",
-                    "resolved": "{ images: string[]; index: number; }",
-                    "references": {}
-                }
-            }];
-    }
-}

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.css

@@ -1,127 +0,0 @@
-:host { display: block; }
-
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.92);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-  animation: fade-in 0.3s ease-out;
-}
-
-.overlay__close {
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 10010;
-  transition: background 0.15s;
-}
-.overlay__close:hover { background: rgba(255, 255, 255, 0.2); }
-
-.overlay__body {
-  display: flex;
-  width: 90%;
-  height: 80%;
-  max-width: 1200px;
-  gap: 32px;
-  align-items: center;
-}
-
-.overlay__body--single {
-  justify-content: center;
-}
-
-/* ── Thumbnails (Left Column) ─────────────────────────── */
-.overlay__thumbs {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 8px;
-  width: 100px;
-  flex-shrink: 0;
-}
-
-/* Hide scrollbar but keep functionality */
-.overlay__thumbs::-webkit-scrollbar { width: 4px; }
-.overlay__thumbs::-webkit-scrollbar-thumb { background: var(--Gray-Gray-600); border-radius: 4px; }
-
-.overlay__thumb-box {
-  width: 80px;
-  height: 80px;
-  border: 2px solid transparent;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: border-color 0.2s;
-}
-
-.overlay__thumb-box--active {
-  border-color: var(--Primary-Primary-500, #f49a3d);
-}
-
-.overlay__thumb-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* ── Main Content (Right Area) ─────────────────────────── */
-.overlay__content {
-  flex: 1;
-  height: 100%;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.overlay__main-image {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-  animation: scale-up 0.3s ease-out;
-}
-
-.overlay__nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background 0.2s;
-  z-index: 5;
-}
-
-.overlay__nav:hover { background: rgba(255, 255, 255, 0.2); }
-.overlay__nav--prev { left: -24px; }
-.overlay__nav--next {
-  right: -24px;
-  background: var(--Neutral-White);
-}
-.overlay__nav--next:hover { background: var(--Neutral-White); }
-
-@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
-@keyframes scale-up { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.js

@@ -1,156 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-image-overlay
- * Full-screen image lightbox with prev/next navigation and thumbnails.
- */
-export class DropiImageOverlay {
-    /** Whether the overlay is visible */
-    visible = false;
-    /** Images array or JSON string */
-    images = [];
-    /** Initially active image index */
-    activeIndex = 0;
-    current = 0;
-    parsedImages = [];
-    /** Emitted when overlay closes */
-    dropiClose;
-    imagesChanged(val) {
-        this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);
-    }
-    indexChanged(val) { this.current = val; }
-    visibleChanged(val) {
-        if (val)
-            this.current = this.activeIndex;
-    }
-    componentWillLoad() {
-        this.imagesChanged(this.images);
-        this.current = this.activeIndex;
-    }
-    close() { this.visible = false; this.dropiClose.emit(); }
-    prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }
-    next() { this.current = (this.current + 1) % this.parsedImages.length; }
-    handleError(e) {
-        e.target.src =
-            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
-    }
-    render() {
-        const isVisible = this.visible === true || String(this.visible) === 'true';
-        if (!isVisible)
-            return null;
-        const imgs = this.parsedImages;
-        const multi = imgs.length > 1;
-        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-large", width: "24px", height: "24px", color: "Neutral-White" })), h("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (h("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (h("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, h("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), h("div", { class: "overlay__content" }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", width: "18px", height: "18px", color: "Gray-Gray-500" }))), h("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", width: "18px", height: "18px", color: "Gray-Gray-500" })))))));
-    }
-    static get is() { return "dropi-image-overlay"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-image-overlay.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-image-overlay.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "visible": {
-                "type": "any",
-                "mutable": true,
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the overlay is visible"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "visible",
-                "defaultValue": "false"
-            },
-            "images": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string[] | string",
-                    "resolved": "string | string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Images array or JSON string"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "images",
-                "defaultValue": "[]"
-            },
-            "activeIndex": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Initially active image index"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "active-index",
-                "defaultValue": "0"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "current": {},
-            "parsedImages": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dropiClose",
-                "name": "dropiClose",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when overlay closes"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "images",
-                "methodName": "imagesChanged"
-            }, {
-                "propName": "activeIndex",
-                "methodName": "indexChanged"
-            }, {
-                "propName": "visible",
-                "methodName": "visibleChanged"
-            }];
-    }
-}