@dropi/ui 0.1.18 → 0.1.20

package/dist/collection/components/dropi-file-upload/dropi-file-upload.js

@@ -0,0 +1,257 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-file-upload
+ * Drag-and-drop file upload zone with file type/size validation.
+ * Emits selected files as UploadedFile objects.
+ */
+export class DropiFileUpload {
+    /** Accepted MIME types (comma-separated, e.g. "image/*,application/pdf") */
+    accept = '';
+    /** Allow multiple file selection */
+    multiple = false;
+    /** Max file size in MB */
+    maxSizeMb = 10;
+    /** Disabled state */
+    disabled = false;
+    /** Label text above zone */
+    label = '';
+    /** Helper text inside drop zone */
+    helperText = 'Arrastra o haz clic para subir un archivo';
+    dragging = false;
+    errors = [];
+    inputRef;
+    /** Emitted with array of UploadedFile when files are selected/dropped */
+    dropiFilesSelected;
+    /** Emitted when a file fails validation. e.detail = error message */
+    dropiFileError;
+    async readFiles(fileList) {
+        const errs = [];
+        const valid = [];
+        for (let i = 0; i < fileList.length; i++) {
+            const file = fileList[i];
+            if (this.maxSizeMb && file.size > this.maxSizeMb * 1024 * 1024) {
+                const msg = `"${file.name}" supera el tamaño máximo de ${this.maxSizeMb} MB`;
+                errs.push(msg);
+                this.dropiFileError.emit(msg);
+                continue;
+            }
+            const dataUrl = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.readAsDataURL(file);
+            });
+            valid.push({ name: file.name, size: file.size, type: file.type, dataUrl });
+        }
+        this.errors = errs;
+        if (valid.length)
+            this.dropiFilesSelected.emit(valid);
+    }
+    handleDrop(e) {
+        e.preventDefault();
+        this.dragging = false;
+        if (this.disabled || !e.dataTransfer?.files.length)
+            return;
+        this.readFiles(e.dataTransfer.files);
+    }
+    handleInputChange(e) {
+        const input = e.target;
+        if (input.files?.length)
+            this.readFiles(input.files);
+        input.value = '';
+    }
+    render() {
+        return (h("div", { key: '5498c6aa5d81a5265bf4e954e7674f4db8c5c538', class: "upload-wrap" }, this.label && h("label", { key: '94cd8bcaf7dba51e9d7861412d6a509841518367', class: "upload-label" }, this.label), h("div", { key: 'c3b5417103abab569b8a883967d567a4ec6ab483', class: {
+                'upload-zone': true,
+                'upload-zone--dragging': this.dragging,
+                'upload-zone--disabled': this.disabled,
+            }, onClick: () => {
+                if (!this.disabled)
+                    this.inputRef.click();
+            }, onDragOver: (e) => {
+                e.preventDefault();
+                if (!this.disabled)
+                    this.dragging = true;
+            }, onDragLeave: () => this.dragging = false, onDrop: (e) => this.handleDrop(e) }, h("dropi-icon", { key: '436802ec23dc677807ecac36947cd58f9d253e4d', name: "Upload", width: "32px", height: "32px", color: "Primary-Primary-500" }), h("p", { key: 'c80ed3536466ae22dcd96fabf353a736515e5bab', class: "upload-zone__text" }, this.helperText), this.maxSizeMb && (h("p", { key: '26defe6cece9a9ba6e9d7e2a1913a65607a20036', class: "upload-zone__hint" }, "Tama\u00F1o m\u00E1ximo: ", this.maxSizeMb, " MB")), h("input", { key: '00f7657bfc1646f01dfbc0339df6ed9f04a71ab0', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.handleInputChange(e) })), this.errors.map(err => (h("p", { class: "upload-error" }, err)))));
+    }
+    static get is() { return "dropi-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-file-upload.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted MIME types (comma-separated, e.g. \"image/*,application/pdf\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept",
+                "defaultValue": "''"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple file selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "maxSizeMb": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max file size in MB"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size-mb",
+                "defaultValue": "10"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text above zone"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text inside drop zone"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "'Arrastra o haz clic para subir un archivo'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragging": {},
+            "errors": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiFilesSelected",
+                "name": "dropiFilesSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with array of UploadedFile when files are selected/dropped"
+                },
+                "complexType": {
+                    "original": "UploadedFile[]",
+                    "resolved": "UploadedFile[]",
+                    "references": {
+                        "UploadedFile": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-file-upload/dropi-file-upload.tsx",
+                            "id": "src/components/dropi-file-upload/dropi-file-upload.tsx::UploadedFile"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropiFileError",
+                "name": "dropiFileError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a file fails validation. e.detail = error message"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-file-upload-progress-bar/dropi-file-upload-progress-bar.css

@@ -0,0 +1,111 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.upload-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-3, 12px);
+  padding: var(--Size-3, 12px);
+  border: 1px solid var(--Gray-Gray-100, #eceef4);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+}
+
+.upload-item--success { border-color: var(--Success-Success-200, #a7edbb); }
+.upload-item--error   { border-color: var(--Error-Error-200, #f9b4b4); }
+
+.upload-item__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--Gray-Gray-50, #f7f8fa);
+  border-radius: var(--Border-1, 4px);
+}
+
+.upload-item__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-1, 4px);
+}
+
+.upload-item__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--Size-2, 8px);
+}
+
+.upload-item__name {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1a2033);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.upload-item__size {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+  flex-shrink: 0;
+}
+
+/* Progress bar */
+.upload-item__bar-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+}
+
+.upload-item__bar {
+  flex: 1;
+  height: 6px;
+  background: var(--Gray-Gray-100, #eceef4);
+  border-radius: 100px;
+  overflow: hidden;
+}
+
+.upload-item__bar-fill {
+  height: 100%;
+  background: var(--Primary-Primary-500, #f49a3d);
+  border-radius: 100px;
+  transition: width 0.3s ease;
+}
+
+.upload-item--success .upload-item__bar-fill { background: var(--Success-Success-500, #34c55a); }
+.upload-item--error   .upload-item__bar-fill { background: var(--Error-Error-500, #f46a6b); }
+.upload-item--paused  .upload-item__bar-fill { background: var(--Warning-Warning-500, #f49a3d); }
+
+.upload-item__pct {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+  width: 32px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.upload-item__error {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Error-Error-500, #f46a6b);
+}
+
+/* Cancel */
+.upload-item__cancel {
+  background: none;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: var(--Border-1, 4px);
+  transition: background 0.15s;
+}
+.upload-item__cancel:hover { background: var(--Gray-Gray-50, #f7f8fa); }

package/dist/collection/components/dropi-file-upload-progress-bar/dropi-file-upload-progress-bar.js

@@ -0,0 +1,198 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-file-upload-progress-bar
+ * Shows upload progress for a single file with name, size, progress bar, and status.
+ */
+export class DropiFileUploadProgressBar {
+    /** File name */
+    fileName = '';
+    /** File size label (e.g. "1.2 MB") */
+    fileSize = '';
+    /** Upload progress 0–100 */
+    progress = 0;
+    /** Current status */
+    status = 'uploading';
+    /** Error message shown when status is "error" */
+    errorMessage = 'Error al cargar el archivo';
+    /** Show cancel/remove button */
+    showCancel = true;
+    /** Emitted when cancel/remove clicked */
+    dropiCancel;
+    get clampedProgress() {
+        return Math.min(100, Math.max(0, this.progress));
+    }
+    get iconName() {
+        switch (this.status) {
+            case 'success': return 'Check-circle';
+            case 'error': return 'Close-circle';
+            case 'paused': return 'Pause-circle';
+            default: return 'Document';
+        }
+    }
+    get iconColor() {
+        switch (this.status) {
+            case 'success': return 'Success-Success-500';
+            case 'error': return 'Error-Error-500';
+            case 'paused': return 'Warning-Warning-500';
+            default: return 'Primary-Primary-500';
+        }
+    }
+    render() {
+        const pct = this.clampedProgress;
+        return (h("div", { key: '1a7e98a56a7f60be4f9934f6e124ed9b78d815a2', class: `upload-item upload-item--${this.status}` }, h("div", { key: 'a3bd11ec50244ba045361e015202bf895e74ef54', class: "upload-item__icon" }, h("dropi-icon", { key: '0cbd181eb3cebab1feff8bc21748a62c66a4a38f', name: this.iconName, width: "24px", height: "24px", color: this.iconColor })), h("div", { key: 'fde507232d8105da36820a2dcd5e555ef28da37e', class: "upload-item__content" }, h("div", { key: '6d800c22fe3c659bfe39bf8b75f62668cfda6195', class: "upload-item__header" }, h("span", { key: 'cec4dc4b7c0658bf2f086742cc53caea655ef493', class: "upload-item__name" }, this.fileName), this.fileSize && h("span", { key: '9c523619ef47586b4236de2f21f9e483c6c100fc', class: "upload-item__size" }, this.fileSize)), this.status === 'error' ? (h("p", { class: "upload-item__error" }, this.errorMessage)) : (h("div", { class: "upload-item__bar-wrap" }, h("div", { class: "upload-item__bar" }, h("div", { class: "upload-item__bar-fill", style: { width: `${pct}%` } })), h("span", { class: "upload-item__pct" }, pct, "%")))), this.showCancel && (h("button", { key: '375c0fb876e6d2073ae55a96a2fe9654f399870e', class: "upload-item__cancel", onClick: () => this.dropiCancel.emit(), "aria-label": "Cancelar" }, h("dropi-icon", { key: '84dc8576cabe8846b7759411ad57fe7bab218ec2', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))));
+    }
+    static get is() { return "dropi-file-upload-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-file-upload-progress-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-file-upload-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fileName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "File name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-name",
+                "defaultValue": "''"
+            },
+            "fileSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "File size label (e.g. \"1.2 MB\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-size",
+                "defaultValue": "''"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Upload progress 0\u2013100"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress",
+                "defaultValue": "0"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'uploading' | 'success' | 'error' | 'paused'",
+                    "resolved": "\"error\" | \"paused\" | \"success\" | \"uploading\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'uploading'"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message shown when status is \"error\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "'Error al cargar el archivo'"
+            },
+            "showCancel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show cancel/remove button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-cancel",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiCancel",
+                "name": "dropiCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when cancel/remove clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -34,7 +34,7 @@ export class DropiIcon {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (h("svg", { key: '2bcb456155fc78c9602c5e34bc8f70d0d44bd050', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '92aa54406161cfdf5deda5f42a83e06480eb6208', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
+        return (h("svg", { key: '2ddcab388d4a4aa5eeb4068160210581977f270d', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: 'cf485e8fb45231b2ad43b069f3d0d69047f7bc9c', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
     }
     static get is() { return "dropi-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,91 @@
+:host {
+  display: inline-flex;
+}
+
+.dropi-ilustration {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropi-ilustration__image,
+.dropi-ilustration-insignia {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropi-ilustration__image img {
+  max-width: 100%;
+  height: auto;
+}
+
+.dropi-ilustration__image-mb {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin: 0;
+}
+
+.dropi-ilustration__image-mb.success {
+  background: var(--Success-Success-500, #22c55e);
+}
+
+.dropi-ilustration__image-mb.error {
+  background: var(--Error-Error-500, #ef4444);
+}
+
+.dropi-ilustration__image-mb.info {
+  background: var(--Info-Info-500, #3b82f6);
+}
+
+.dropi-ilustration__image-mb.warning {
+  background: url('assets/icons/ilustration/bg-warning.svg') no-repeat center;
+  background-size: contain;
+  border-radius: 0;
+}
+
+.dropi-ilustration-insignia-tag {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.dropi-ilustration-insignia-tag img {
+  position: relative;
+  z-index: 2;
+  height: 32px;
+  width: auto;
+}
+
+.tag {
+  border-radius: 32px;
+  color: var(--Neutral-White, #fff);
+  text-transform: capitalize;
+  margin: 0 0 0 -20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.tag span {
+  color: var(--Neutral-White, #fff);
+  padding: 4px 8px 4px 18px;
+  font-size: 10px;
+}
+
+.tag--verified {
+  background: linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%);
+}
+
+.tag--premium {
+  background: linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%);
+}
+
+.tag--exclusive {
+  background: linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%);
+}