@dropi/ui 0.1.18 → 0.1.19

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

@@ -0,0 +1,305 @@
+import { h } from "@stencil/core";
+const STATE_ICONS = {
+    success: 'Check-circle',
+    error: 'Warning-circle',
+    warning: 'Warning-triangle',
+    info: 'Info-circle',
+};
+const STATE_COLORS = {
+    success: 'Success-Success-500',
+    error: 'Error-Error-500',
+    warning: 'Warning-Warning-500',
+    info: 'Info-Info-500',
+};
+/**
+ * @component dropi-alert
+ * Alert banner with state variants (success/error/warning/info),
+ * optional action button, anchor link, and dismissable close icon.
+ */
+export class DropiAlert {
+    /** Alert message text (supports plain text) */
+    message = '';
+    /** Layout type: default (inline) | flag (accented left border) */
+    type = 'default';
+    /** Semantic state */
+    state = 'info';
+    /** Show the × close button */
+    dismissable = false;
+    /** Show action button */
+    showButton = false;
+    /** Action button label */
+    buttonText = '';
+    /** Anchor/link label */
+    anchorText = '';
+    /** Anchor href */
+    anchorUrl = '';
+    /** Whether the alert is visible */
+    showAlert = true;
+    /** Emitted when the alert is dismissed */
+    dropiClose;
+    /** Emitted when the action button is clicked */
+    dropiButtonClick;
+    /** Emitted when the anchor link is clicked */
+    dropiLinkClick;
+    render() {
+        if (!this.showAlert)
+            return null;
+        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], width: "18px", height: "18px", color: STATE_COLORS[this.state] })), h("div", { class: "alert__body" }, h("span", { class: "alert__message" }, this.message), this.anchorText && (h("a", { class: "alert__link", href: this.anchorUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && (h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
+    }
+    static get is() { return "dropi-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alert message text (supports plain text)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlertType",
+                    "resolved": "\"default\" | \"flag\"",
+                    "references": {
+                        "AlertType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-alert/dropi-alert.tsx",
+                            "id": "src/components/dropi-alert/dropi-alert.tsx::AlertType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout type: default (inline) | flag (accented left border)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlertState",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "AlertState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-alert/dropi-alert.tsx",
+                            "id": "src/components/dropi-alert/dropi-alert.tsx::AlertState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'info'"
+            },
+            "dismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the \u00D7 close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissable",
+                "defaultValue": "false"
+            },
+            "showButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show action button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-button",
+                "defaultValue": "false"
+            },
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Action button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-text",
+                "defaultValue": "''"
+            },
+            "anchorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Anchor/link label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor-text",
+                "defaultValue": "''"
+            },
+            "anchorUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Anchor href"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor-url",
+                "defaultValue": "''"
+            },
+            "showAlert": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the alert is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-alert",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiClose",
+                "name": "dropiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the alert is dismissed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiButtonClick",
+                "name": "dropiButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the action button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiLinkClick",
+                "name": "dropiLinkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the anchor link is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-avatars/dropi-avatars.css

@@ -0,0 +1,55 @@
+:host {
+  display: inline-block;
+}
+
+.avatar {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+/* ── Size variants ─────────────────────────────────────── */
+.avatar--users,
+.avatar--transport,
+.avatar--payment {
+  width: 35px;
+  height: 35px;
+}
+
+.avatar--supplier {
+  width: 70px;
+  height: 70px;
+}
+
+.avatar--counter {
+  width: 33px;
+  height: 33px;
+}
+
+/* ── Initials fallback ─────────────────────────────────── */
+.avatar__initials {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--Primary-Primary-100, #fde9d0);
+  color: var(--Primary-Primary-600, #d4872e);
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}

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

@@ -0,0 +1,126 @@
+import { h } from "@stencil/core";
+const FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;
+/**
+ * @component dropi-avatars
+ * Avatar component with image, initials fallback, and type-based size variants.
+ */
+export class DropiAvatars {
+    /** Image URL */
+    image = '';
+    /** Alt text for the image */
+    alt = 'avatar';
+    /** Size/context variant */
+    type = 'users';
+    /** Initials to show when no image (max 2 chars) */
+    initials = '';
+    handleError(e) {
+        e.target.src = FALLBACK;
+    }
+    render() {
+        const displayInitials = this.initials?.slice(0, 2).toUpperCase();
+        const showInitials = !this.image && displayInitials;
+        return (h("figure", { key: '5bce853f6d1d17dcad603cf103d6de09ae612147', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (h("div", { class: "avatar__initials" }, displayInitials)) : (h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
+    }
+    static get is() { return "dropi-avatars"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-avatars.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-avatars.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image",
+                "defaultValue": "''"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "'avatar'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarType",
+                    "resolved": "\"counter\" | \"payment\" | \"supplier\" | \"transport\" | \"users\"",
+                    "references": {
+                        "AvatarType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-avatars/dropi-avatars.tsx",
+                            "id": "src/components/dropi-avatars/dropi-avatars.tsx::AvatarType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size/context variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'users'"
+            },
+            "initials": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initials to show when no image (max 2 chars)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initials",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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

@@ -25,7 +25,7 @@ export class DropiBadge {
         return null;
     }
     render() {
-        return (h("div", { key: 'b66590d82d7dd760badcfb76c72eb3d589073721', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '82ae7072f3ac6d96ed02db8289f0f98f070a882d' }, this.stateText[this.state])));
+        return (h("div", { key: '7a043420848f083d161765c16da41dc1f7c38065', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '4227bf47f3169673f44b62bde46498e3c8d607cd' }, this.stateText[this.state])));
     }
     static get is() { return "dropi-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,14 +62,14 @@ export class DropiButton {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (h("button", { key: '6cde7f2616d1cff9e3304481f2a0c38aabc34192', class: {
+        return (h("button", { key: '893717e317f10193bfa723d65607fc79e5875309', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
                 [this.type]: true,
                 [this.size]: true,
                 [this.state]: true,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '769cea8fce2947552462aa2cbbb09d64df952c76', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'f66ad80283d54f643cf37ea702145127b90d4ce4', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '4fd9c7d7d029c3316bc0492576cda0cca74fa460', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3280c56a28ea40016d35e186b9997635b8ba881b' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '922e32f5466164279fdb9408502412d4246ee1f2', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '9b8c506a5e4a791bde84d36e2991386ee2a3822f', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'c1f66fba38426ff724450a806c99939ffaca0c75', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'af5cc164403ec0592f4740368784c343e38a0227' })));
     }
     static get is() { return "dropi-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-card-section/dropi-card-section.css

@@ -0,0 +1,42 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.card-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--Size-4, 16px);
+  padding: var(--Size-3, 12px) var(--Size-4, 16px);
+  background: var(--Neutral-White, #fff);
+  border: 1px solid var(--Gray-Gray-100, #e6eaf2);
+  border-radius: var(--Border-2, 8px);
+}
+
+.card-section__text { flex: 1; }
+
+.card-section__title {
+  margin: 0 0 4px;
+  font-family: inherit;
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1a2033);
+}
+
+h5.card-section__title { font-size: var(--font-size-m, 14px); }
+h6.card-section__title { font-size: var(--font-size-s, 12px); }
+
+.card-section__desc {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+.card-section__control { flex-shrink: 0; }
+
+.card-section__dropdown-btn {
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}