@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,184 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-dropdown
+ * Scrollable list with checkboxes for multi-selection.
+ * Pass options as an array (JS) or JSON string.
+ */
+export class DropiDropdown {
+    /** Options array or JSON string */
+    options = [];
+    /** Property name to display as the option label */
+    valueModel = 'name';
+    /** Property name to use as the option image/avatar URL */
+    imageModel = '';
+    /** Max height of the list container (CSS value) */
+    height = '300px';
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes. e.detail = selected items array */
+    dropiChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    isSelected(opt) {
+        return this.selected.some(s => JSON.stringify(s) === JSON.stringify(opt));
+    }
+    toggleOption(opt) {
+        if (this.isSelected(opt)) {
+            this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));
+        }
+        else {
+            this.selected = [...this.selected, opt];
+        }
+        this.dropiChange.emit(this.selected);
+    }
+    render() {
+        return (h("div", { key: '7c8505a82b836b58ea73603249ed2143b0692fc2', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
+            const label = opt[this.valueModel] ?? String(opt);
+            const imgUrl = this.imageModel ? opt[this.imageModel] : '';
+            const active = this.isSelected(opt);
+            return (h("div", { class: { 'dropdown__item': true, 'dropdown__item--active': active }, key: i, onClick: () => this.toggleOption(opt) }, h("dropi-checkbox", { checked: active }), imgUrl && (h("img", { class: "dropdown__avatar", src: imgUrl, alt: label })), h("span", { class: "dropdown__label" }, label)));
+        })));
+    }
+    static get is() { return "dropi-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOption[] | string",
+                    "resolved": "DropdownOption[] | string",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-dropdown/dropi-dropdown.tsx",
+                            "id": "src/components/dropi-dropdown/dropi-dropdown.tsx::DropdownOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options array or JSON string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "valueModel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property name to display as the option label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-model",
+                "defaultValue": "'name'"
+            },
+            "imageModel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property name to use as the option image/avatar URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-model",
+                "defaultValue": "''"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max height of the list container (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'300px'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selected": {},
+            "parsedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes. e.detail = selected items array"
+                },
+                "complexType": {
+                    "original": "DropdownOption[]",
+                    "resolved": "DropdownOption[]",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-dropdown/dropi-dropdown.tsx",
+                            "id": "src/components/dropi-dropdown/dropi-dropdown.tsx::DropdownOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-empty-state/dropi-empty-state.css

@@ -19,6 +19,7 @@
   width: 100%;
   height: auto;
   object-fit: contain;
+  filter: brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%);
 }
 
 .empty-state-svg {

package/dist/collection/components/dropi-empty-state/dropi-empty-state.js

@@ -14,14 +14,18 @@ export class DropiEmptyState {
     imageAlt = 'Sin resultados';
     /** Primary action button label (empty = hidden) */
     actionLabel = '';
+    /** State of the illustration (default, loading, sorry, love, success, error) */
+    iconState = 'default';
     /** Secondary action button label (empty = hidden) */
     secondaryLabel = '';
+    /** Severity for the action buttons */
+    actionSeverity = 'tertiary';
     /** Emitted when primary action button is clicked */
     dropiAction;
     /** Emitted when secondary action button is clicked */
     dropiSecondaryAction;
     render() {
-        return (h("div", { key: '1aea01715d0e50b308904d496be7bc2f607bf5aa', class: "empty-state" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-placeholder" }, h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && h("h3", { key: '41e5da8d482456f4b9006449a27a9f9d172d87b4', class: "empty-state-title" }, this.header), this.description && h("p", { key: 'ffa6399489ec56cd2cf84bb39d12c112bee64302', class: "empty-state-description" }, this.description), h("slot", { key: '6ccdfed94a22ad7ece2388fba3d4734aa6a2b509' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: '0da97fd516eccd1cabe846b2d002fdf75306674d', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: 'de1b1ad4d6a50cfd251de243a3b5ea3beb10019b', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '59f3b47ee14f3ac89aa4acc5b42d856f26d02d19', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
+        return (h("div", { key: 'a4aec0618cd8a0900c4d5e82528a86d30c027669', class: "empty-state" }, h("div", { key: '80565c251e85146d824c640cbce4602d509311bb', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${this.iconState}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.header && h("h3", { key: '9cd0fc5aac1aeb089f1ef4c46291c9ad5d630d9c', class: "empty-state-title" }, this.header), this.description && h("p", { key: '4f2fd55693d6376a7d782a8df5d71c33fa8ea523', class: "empty-state-description" }, this.description), h("slot", { key: 'a48aa738f9f9a3a2c1f62d86e36010f2eb6c9b06' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: 'dd2978b2422d1382461eaba5c92eba37817ddb61', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: 'b2d76dd6da170d8af85384ffbe800a4789ea96d9', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '68efcbb4c4069302839501c74affc6d43f7d4c6b', text: this.actionLabel, severity: this.actionSeverity, onDropiClick: () => this.dropiAction.emit() }))))));
     }
     static get is() { return "dropi-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -137,6 +141,26 @@ export class DropiEmptyState {
                 "attribute": "action-label",
                 "defaultValue": "''"
             },
+            "iconState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'loading' | 'sorry' | 'love' | 'success' | 'error' | 'warning' | 'info'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"loading\" | \"love\" | \"sorry\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State of the illustration (default, loading, sorry, love, success, error)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-state",
+                "defaultValue": "'default'"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,
@@ -156,6 +180,26 @@ export class DropiEmptyState {
                 "reflect": false,
                 "attribute": "secondary-label",
                 "defaultValue": "''"
+            },
+            "actionSeverity": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Severity for the action buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-severity",
+                "defaultValue": "'tertiary'"
             }
         };
     }

package/dist/collection/components/dropi-favorite-button/dropi-favorite-button.css

@@ -0,0 +1,24 @@
+:host { display: inline-flex; }
+
+.fav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 37px;
+  height: 37px;
+  border-radius: 8px;
+  border: 1px solid var(--Gray-Gray-200);
+  background: var(--Neutral-White);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.fav-btn:hover,
+.fav-btn--active {
+  background: var(--Gray-Gray-50);
+}
+
+/* Optional: Subtle scale on click */
+.fav-btn:active {
+  transform: scale(0.95);
+}

package/dist/collection/components/dropi-favorite-button/dropi-favorite-button.js

@@ -0,0 +1,78 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-favorite-button
+ * Heart toggle button for marking items as favorite.
+ */
+export class DropiFavoriteButton {
+    /** Whether the item is currently marked as favorite */
+    isFavorite = false;
+    /** Emitted when toggled. e.detail = new favorite state */
+    dropiToggleFavorite;
+    hovered = false;
+    toggle() {
+        this.isFavorite = !this.isFavorite;
+        this.dropiToggleFavorite.emit(this.isFavorite);
+    }
+    render() {
+        return (h("button", { key: '1911efe67d8e0ab2f7531e01a844880054fdf693', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, h("dropi-icon", { key: 'be817f295f9e3e36ca86027f487781f07ae1561d', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+    }
+    static get is() { return "dropi-favorite-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-favorite-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-favorite-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isFavorite": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is currently marked as favorite"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-favorite",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiToggleFavorite",
+                "name": "dropiToggleFavorite",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when toggled. e.detail = new favorite state"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,66 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.upload-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-1, 4px);
+}
+
+.upload-label {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.upload-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-6, 32px) var(--Size-4, 16px);
+  border: 2px dashed var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+  text-align: center;
+}
+
+.upload-zone:hover:not(.upload-zone--disabled) {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+  background: var(--Primary-Primary-50, #fff5eb);
+}
+
+.upload-zone--dragging {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+  background: var(--Primary-Primary-50, #fff5eb);
+}
+
+.upload-zone--disabled {
+  background: var(--Gray-Gray-50, #f7f8fa);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.upload-zone__text {
+  margin: 0;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.upload-zone__hint {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.upload-hidden {
+  display: none;
+}
+
+.upload-error {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Error-Error-500, #f46a6b);
+}