@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,63 +0,0 @@
-:host { display: contents; }
-*, *::before, *::after { box-sizing: border-box; }
-
-.toast-container { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }
-.toast-container--top-right    { top: 80px; right: 0; padding: var(--Size-2, 8px); }
-.toast-container--top-left     { top: 80px; left: 0; padding: var(--Size-2, 8px); }
-.toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
-.toast-container--bottom-left  { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
-.toast-container--top-center    { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }
-.toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }
-
-.toast-wrapper { pointer-events: auto; animation: toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; }
-.toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }
-@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
-
-.toast { position: relative; display: flex; align-items: flex-start; border-radius: var(--Border-2,8px); background: var(--Neutral-White, #ffffff); box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06); border-left: var(--Size-2, 8px) solid; overflow: hidden; min-width: 300px; }
-.toast--success { border-color: var(--Success-Success-500,#34c38f); }
-.toast--error   { border-color: var(--Error-Error-500,#f46a6b); }
-.toast--warn    { border-color: var(--Warning-Warning-500,#f1b44c); }
-.toast--info    { border-color: var(--Info-Info-500,#50a5f1); }
-
-.toast-content {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));
-  gap: var(--Size-4, 16px);
-}
-
-.lottie-img {
-  width: 50px;
-  height: 50px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.lottie-player-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-lottie-player {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.info-container { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }
-.title { margin: 0; font-size: var(--font-size-l,18px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-700,#32394d); line-height: 1.1; text-align: left; max-width: 250px; }
-.description  { margin: 0; font-size: var(--font-size-s,14px); color: var(--Gray-Gray-500, #69738c); line-height: 1.4; text-align: left; max-width: 250px; }
-
-.toast-close { position: absolute; top: 18px; right: 10px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
-.toast-close:hover { opacity: 0.7; }

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

@@ -1,164 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-toast
- * Global toast notification stack. Place once in the app root, call show() from JS.
- *
- * @example
- * const t = document.querySelector('dropi-toast');
- * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });
- */
-export class DropiToast {
-    /** Toast position */
-    position = 'top-right';
-    /** Default auto-close ms (0 = manual) */
-    life = 3000;
-    items = [];
-    idCounter = 0;
-    /** Show a toast */
-    async show(msg) {
-        const id = msg.id ?? `t${++this.idCounter}`;
-        const item = { msg: { ...msg, id, closable: msg.closable ?? true }, leaving: false };
-        this.items = [...this.items, item];
-        const ms = msg.life !== undefined ? msg.life : this.life;
-        if (ms > 0)
-            item.timer = setTimeout(() => this.remove(id), ms);
-    }
-    /** Remove all toasts */
-    async clear() {
-        this.items.forEach(i => {
-            if (i.timer)
-                clearTimeout(i.timer);
-        });
-        this.items = [];
-    }
-    remove(id) {
-        this.items = this.items.map(i => (i.msg.id === id ? { ...i, leaving: true } : i));
-        setTimeout(() => {
-            this.items = this.items.filter(i => i.msg.id !== id);
-        }, 320);
-    }
-    lottieMap = {
-        success: '/assets/lottie-files/success.json',
-        error: '/assets/lottie-files/failure.json',
-        warn: '/assets/lottie-files/warning.json',
-        info: '/assets/lottie-files/question.json',
-    };
-    getLottieHtml(severity) {
-        return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
-    }
-    render() {
-        return (h("div", { key: '468855704e1a9dcb00b0927423326b312a2ca900', class: `toast-container toast-container--${this.position}` }, this.items.map(item => (h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, h("div", { class: `toast toast--${item.msg.severity}` }, h("div", { class: "toast-content" }, h("div", { class: "lottie-img" }, h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), h("div", { class: "info-container" }, h("p", { class: "title" }, item.msg.summary), item.msg.detail && h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-400" })))))))));
-    }
-    static get is() { return "dropi-toast"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-toast.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-toast.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "position": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'",
-                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Toast position"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "position",
-                "defaultValue": "'top-right'"
-            },
-            "life": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Default auto-close ms (0 = manual)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "life",
-                "defaultValue": "3000"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "items": {}
-        };
-    }
-    static get methods() {
-        return {
-            "show": {
-                "complexType": {
-                    "signature": "(msg: ToastMessage) => Promise<void>",
-                    "parameters": [{
-                            "name": "msg",
-                            "type": "ToastMessage",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "ToastMessage": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-toast/dropi-toast.tsx",
-                            "id": "src/components/dropi-toast/dropi-toast.tsx::ToastMessage"
-                        },
-                        "ToastItem": {
-                            "location": "global",
-                            "id": "global::ToastItem"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Show a toast",
-                    "tags": []
-                }
-            },
-            "clear": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Remove all toasts",
-                    "tags": []
-                }
-            }
-        };
-    }
-}

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

@@ -1,32 +0,0 @@
-:host {
-  display: inline-block;
-  position: relative;
-}
-
-.tooltip-simple-bubble {
-  position: absolute;
-  background: var(--Gray-Gray-800, #1e293b);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 8px;
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s;
-  z-index: 1000;
-}
-
-:host(:hover) .tooltip-simple-bubble {
-  opacity: 1;
-}
-
-.tooltip-simple--outlined .tooltip-simple-bubble {
-  border: 1px solid var(--Gray-Gray-300);
-  background: white;
-  color: var(--Gray-Gray-800);
-}

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

@@ -1,70 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-tooltip
- * Simple tooltip (Legacy version).
- */
-export class DropiTooltip {
-    /** Tooltip text */
-    text = '';
-    /** Whether the tooltip has an outline style (matches Angular `outlined`) */
-    outlined = false;
-    render() {
-        return (h("div", { key: '82c2b45a441ae85a0aa7885cde0fcbe1ea553cfa', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: '7fc4ab29a90e329131cd201a953d72c53b364f3f' }), this.text && (h("div", { key: '7de66eff9510747a524bdbccd598071c3f729448', class: "tooltip-simple-bubble" }, this.text))));
-    }
-    static get is() { return "dropi-tooltip"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-tooltip.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-tooltip.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Tooltip text"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text",
-                "defaultValue": "''"
-            },
-            "outlined": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the tooltip has an outline style (matches Angular `outlined`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "outlined",
-                "defaultValue": "false"
-            }
-        };
-    }
-}

package/dist/collection/components/dropi-tooltip-v2/dropi-tooltip.css

@@ -1,67 +0,0 @@
-:host { display: inline-block; }
-*, *::before, *::after { box-sizing: border-box; }
-
-.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
-
-.tooltip-bubble {
-  position: absolute; z-index: 9999;
-  background: var(--Gray-Gray-800); color: var(--Neutral-White, #ffffff);
-  font-size: var(--font-size-s,14px); line-height: 1.5;
-  padding: 8px 12px; border-radius: 8px;
-  white-space: normal; pointer-events: none;
-  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
-  word-break: break-word;
-  box-shadow: var(--Shadow-medium);
-  text-align: left;
-  width: max-content;
-}
-.tooltip-bubble--visible { opacity: 1; }
-
-.tooltip-bubble--top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
-.tooltip-bubble--bottom { top: calc(100% + 12px);    left: 50%; transform: translateX(-50%); }
-.tooltip-bubble--left   { right: calc(100% + 12px);  top: 50%;  transform: translateY(-50%); }
-.tooltip-bubble--right  { left: calc(100% + 12px);   top: 50%;  transform: translateY(-50%); }
-
-.tooltip-arrow { position: absolute; width: 12px; height: 6px; }
-.tooltip-arrow::before {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.tooltip-arrow--top {
-  top: 100%; left: 50%; transform: translateX(-50%);
-}
-.tooltip-arrow--top::before {
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid var(--Gray-Gray-800);
-}
-
-.tooltip-arrow--bottom {
-  bottom: 100%; left: 50%; transform: translateX(-50%);
-}
-.tooltip-arrow--bottom::before {
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid var(--Gray-Gray-800);
-}
-
-.tooltip-arrow--left {
-  left: 100%; top: 50%; transform: translateY(-50%);
-}
-.tooltip-arrow--left::before {
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 6px solid var(--Gray-Gray-800);
-}
-
-.tooltip-arrow--right {
-  right: 100%; top: 50%; transform: translateY(-50%);
-}
-.tooltip-arrow--right::before {
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-right: 6px solid var(--Gray-Gray-800);
-}