@dropi/ui 0.1.55 → 999.0.0

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

@@ -1,54 +0,0 @@
-:host { display: contents; font-family: var(--font-family-01, 'Inter', sans-serif); }
-button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
-
-.dropi-toast-container { position: fixed; z-index: var(--dropi-z-index-toast, 12000); display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; box-sizing: border-box; }
-.dropi-toast-container--top-right    { top: 80px; right: 0; padding: var(--Size-2, 8px); }
-.dropi-toast-container--top-left     { top: 80px; left: 0; padding: var(--Size-2, 8px); }
-.dropi-toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
-.dropi-toast-container--bottom-left  { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
-.dropi-toast-container--top-center    { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }
-.dropi-toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }
-
-.dropi-toast-wrapper { pointer-events: auto; animation: dropi-toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; box-sizing: border-box; }
-.dropi-toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }
-@keyframes dropi-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
-
-.dropi-toast-item { position: relative; display: flex; align-items: center; border-radius: 8px; background: #ffffff; box-shadow: 0.5px -1px 7px 0px rgba(0,0,0,0.06), 0px 4px 20px 0px rgba(0,0,0,0.12); border-left: 8px solid; overflow: hidden; min-width: 300px; box-sizing: border-box; }
-.dropi-toast-item--success { border-color: var(--Success-Success-500,#34c38f); }
-.dropi-toast-item--error   { border-color: var(--Error-Error-500,#f46a6b); }
-.dropi-toast-item--warn    { border-color: var(--Warning-Warning-500,#f1b44c); }
-.dropi-toast-item--info    { border-color: var(--Info-Info-500,#50a5f1); }
-
-.dropi-toast-content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 16px 16px 16px 8px;
-  gap: 16px;
-  box-sizing: border-box;
-  flex: 1;
-}
-
-.dropi-toast-lottie {
-  width: 56px;
-  height: 56px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.dropi-toast-lottie lottie-player {
-  display: block;
-  width: 56px;
-  height: 56px;
-  flex-shrink: 0;
-}
-
-.dropi-toast-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }
-.dropi-toast-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; }
-.dropi-toast-detail { 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; }
-
-.dropi-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; }
-.dropi-toast-close:hover { opacity: 0.7; }

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

@@ -1,162 +0,0 @@
-import { h } from "@stencil/core";
-import { LOTTIE_MAP } from "../../utils/lottie-map.generated";
-/**
- * @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) {
-        console.log('DropiToast show() called with:', 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);
-    }
-    severityToLottieKey = {
-        success: 'success',
-        error: 'error',
-        warn: 'warning',
-        info: 'question',
-    };
-    render() {
-        return (h("div", { key: 'e7d23323039ed09e5317fc24f86a4e51af14b249', class: `dropi-toast-container dropi-toast-container--${this.position}` }, (this.items ?? []).map(item => (h("div", { key: item.msg.id, class: { 'dropi-toast-wrapper': true, 'dropi-toast-wrapper--leaving': item.leaving } }, h("div", { class: `dropi-toast-item dropi-toast-item--${item.msg.severity}` }, h("div", { class: "dropi-toast-content" }, h("div", { class: "dropi-toast-lottie" }, h("lottie-player", { key: item.msg.severity, src: LOTTIE_MAP[this.severityToLottieKey[item.msg.severity]], background: "transparent", speed: "1", loop: true, autoplay: true })), h("div", { class: "dropi-toast-info" }, h("p", { class: "dropi-toast-title" }, item.msg.summary), item.msg.detail && h("p", { class: "dropi-toast-detail" }, item.msg.detail))), item.msg.closable && (h("button", { class: "dropi-toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
-    }
-    static get is() { return "dropi-toast"; }
-    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,33 +0,0 @@
-:host {
-button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
-  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: var(--dropi-z-index-overlay, 11000);
-}
-
-: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: '0b14943b628c231fbb530620e7829f70e6099c7a', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: 'bf0245c6fab0ba938834d2d3e84ccaa9cb14f5c8' }), this.text && (h("div", { key: 'e1e33acf8628f79b36c5cc66c7076a03ce8167f7', 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,68 +0,0 @@
-:host { display: inline-block; }
-*, *::before, *::after { box-sizing: border-box; }
-button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
-
-.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
-
-.tooltip-bubble {
-  position: absolute; z-index: var(--dropi-z-index-overlay, 11000);
-  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);
-}