@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,134 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.alert {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-3, 12px);
+  border-radius: var(--Border-2, 8px);
+  border: 1px solid transparent;
+  width: 100%;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── State colors ───────────────────────────────────────── */
+.alert--success {
+  background: var(--Success-Success-50, #e7f8f3);
+  border-color: var(--Success-Success-500, #0abb87);
+}
+
+.alert--error {
+  background: var(--Error-Error-50, #fef0f0);
+  border-color: var(--Error-Error-500, #f46a6b);
+}
+
+.alert--warning {
+  background: var(--Warning-Warning-50, #fef8ed);
+  border-color: var(--Warning-Warning-500, #f1b44c);
+}
+
+.alert--info {
+  background: var(--Info-Info-50, #eef6fe);
+  border-color: var(--Info-Info-500, #50a5f1);
+}
+
+/* ── Flag type (left accent border) ────────────────────── */
+.alert--flag {
+  padding: var(--Size-1, 4px) var(--Size-2, 8px);
+  border-radius: var(--Border-1, 4px);
+  border: none !important;
+  justify-content: center;
+}
+.alert--flag .alert__body {
+  justify-content: center;
+  text-align: center;
+}
+.alert--flag .alert__message {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+/* ── Icon ───────────────────────────────────────────────── */
+.alert__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-top: 1px;
+}
+
+/* ── Body ───────────────────────────────────────────────── */
+.alert__body {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+}
+
+.alert__message {
+  font-size: 14px;
+  color: var(--Gray-600, #475066);
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.alert__link {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Primary-Primary-500, #f49a3d);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* ── Actions ────────────────────────────────────────────── */
+.alert__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  flex-shrink: 0;
+}
+
+.alert__btn {
+  height: 28px;
+  padding: 0 var(--Size-3, 12px);
+  border-radius: var(--Border-2, 8px);
+  border: 1px solid var(--Primary-Primary-500, #f49a3d);
+  background: transparent;
+  color: var(--Primary-Primary-500, #f49a3d);
+  font-size: var(--font-size-xs, 10px);
+  font-family: inherit;
+  font-weight: var(--font-weight-bold, 700);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.alert__btn:hover {
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #fff);
+}
+
+.alert__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s;
+}
+
+.alert__close:hover {
+  opacity: 1;
+}

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',
+};
+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 } }, this.type !== 'flag' && (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 && this.type !== 'flag' && (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-alert-modal/dropi-alert-modal.css

@@ -0,0 +1,73 @@
+:host {
+  display: contents;
+}
+
+.body-alert {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  text-align: center !important;
+}
+
+.lottie-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  width: 120px;
+  margin-top: -8px;
+  margin-bottom: var(--Size-2, 8px);
+}
+
+.lottie-img--loading {
+  min-height: 160px;
+  width: 100%;
+}
+
+.content-alert {
+  text-align: center;
+  width: 100%;
+}
+
+.content-alert h2 {
+  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--Size-5, 24px);
+  font-weight: 700;
+  margin: 0 0 var(--Size-2, 8px);
+  text-align: center !important;
+}
+
+.content-alert p {
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-s, 14px);
+  margin: 0;
+  text-align: center !important;
+  overflow-wrap: anywhere;
+  max-height: 100px;
+  overflow: auto;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  margin-top: var(--Size-4, 16px);
+}
+
+.actions dropi-button {
+  flex: 1;
+  display: flex;
+}
+
+/* .btn replaced by dropi-button components */
+
+@media (max-width: 768px) {
+  .actions {
+    flex-direction: column;
+  }
+}