@dropi/ui 0.1.26 → 0.1.28

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: 'db9310b5c789b079fc0f9043a619bd22f9a60151', 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.css

@@ -0,0 +1,41 @@
+:host {
+  display: inline-flex;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.tag-state {
+  border-radius: 12px;
+  padding: 2px 10px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tag-state svg {
+  width: 13px;
+}
+
+.tag-state p {
+  font-size: 13px;
+  font-weight: var(--font-weight-medium);
+  line-height: 20px;
+  margin: 0;
+  padding: 0;
+}
+
+.tag-state.active {
+  background: var(--Success-Success-50, #e7f8f3);
+  color: var(--Success-Success-500, #0abb87);
+}
+
+.tag-state.pending {
+  color: var(--Orange-orange-500, #f49a3d);
+  background: var(--Orange-orange-50, #fef5ec);
+}
+
+.tag-state.canceled,
+.tag-state.frozen {
+  color: var(--Gray-Gray-500, #69738c);
+  background: var(--Gray-Gray-50, #f7f8fa);
+}

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

@@ -0,0 +1,71 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-badge
+ * Status badge for user/account states.
+ */
+export class DropiBadge {
+    /** Badge state: pending | active | canceled | frozen */
+    state;
+    stateText = {
+        pending: 'Pendiente',
+        active: 'Activo',
+        canceled: 'Cancelado',
+        frozen: 'Congelado',
+    };
+    renderIcon() {
+        if (this.state === 'active') {
+            return (h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11.5444 5.87067L12.5389 6.88004L8.43554 10.9225C8.16142 11.1966 7.80087 11.3333 7.43892 11.3333C7.07696 11.3333 6.71287 11.1952 6.43592 10.919L4.46533 9.00929L5.45204 7.99142L7.43042 9.90887L11.5444 5.87067ZM17 8.5C17 13.187 13.187 17 8.5 17C3.81296 17 0 13.187 0 8.5C0 3.81296 3.81296 0 8.5 0C13.187 0 17 3.81296 17 8.5ZM15.5833 8.5C15.5833 4.59425 12.4057 1.41667 8.5 1.41667C4.59425 1.41667 1.41667 4.59425 1.41667 8.5C1.41667 12.4057 4.59425 15.5833 8.5 15.5833C12.4057 15.5833 15.5833 12.4057 15.5833 8.5Z", fill: "currentColor" })));
+        }
+        if (this.state === 'pending') {
+            return (h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.5 17C3.81296 17 0 13.187 0 8.5C0 3.81296 3.81296 0 8.5 0C13.187 0 17 3.81296 17 8.5C17 13.187 13.187 17 8.5 17ZM8.5 1.41667C4.59425 1.41667 1.41667 4.59425 1.41667 8.5C1.41667 12.4057 4.59425 15.5833 8.5 15.5833C12.4057 15.5833 15.5833 12.4057 15.5833 8.5C15.5833 4.59425 12.4057 1.41667 8.5 1.41667ZM9.20833 8.5V4.25C9.20833 3.859 8.891 3.54167 8.5 3.54167C8.109 3.54167 7.79167 3.859 7.79167 4.25V7.79167H5.66667C5.27567 7.79167 4.95833 8.109 4.95833 8.5C4.95833 8.891 5.27567 9.20833 5.66667 9.20833H8.5C8.891 9.20833 9.20833 8.891 9.20833 8.5Z", fill: "currentColor" })));
+        }
+        if (this.state === 'canceled') {
+            return (h("svg", { width: "12", height: "14", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.5497 4.86859V5.76046C12.1075 6.00391 12.5823 6.40464 12.916 6.91364C13.2497 7.42264 13.4279 8.01785 13.4287 8.62648V12.3844C13.4277 13.2146 13.0974 14.0106 12.5103 14.5976C11.9233 15.1847 11.1273 15.515 10.2971 15.516H4.03392C3.20368 15.515 2.40773 15.1847 1.82066 14.5976C1.23359 14.0106 0.903338 13.2146 0.902344 12.3844V8.62648C0.903144 8.01785 1.08129 7.42264 1.41498 6.91364C1.74868 6.40464 2.22347 6.00391 2.78129 5.76046V4.86859C2.78129 3.70582 3.2432 2.59068 4.0654 1.76848C4.8876 0.946282 6.00274 0.484375 7.1655 0.484375C8.32827 0.484375 9.44341 0.946282 10.2656 1.76848C11.0878 2.59068 11.5497 3.70582 11.5497 4.86859ZM4.95114 2.65422C4.36386 3.24151 4.03392 4.03804 4.03392 4.86859V5.4949H10.2971V4.86859C10.2971 4.03804 9.96715 3.24151 9.37986 2.65422C8.79258 2.06694 7.99605 1.73701 7.1655 1.73701C6.33496 1.73701 5.53843 2.06694 4.95114 2.65422ZM11.6257 13.713C11.9781 13.3606 12.176 12.8827 12.176 12.3844V8.62648C12.176 8.12815 11.9781 7.65023 11.6257 7.29786C11.2733 6.94549 10.7954 6.74753 10.2971 6.74753H4.03392C3.53559 6.74753 3.05768 6.94549 2.70531 7.29786C2.35294 7.65023 2.15498 8.12815 2.15498 8.62648V12.3844C2.15498 12.8827 2.35294 13.3606 2.70531 13.713C3.05768 14.0654 3.53559 14.2633 4.03392 14.2633H10.2971C10.7954 14.2633 11.2733 14.0654 11.6257 13.713ZM6.72263 9.43615C6.84009 9.31869 6.99939 9.25271 7.1655 9.25271C7.33161 9.25271 7.49092 9.31869 7.60837 9.43615C7.72583 9.55361 7.79182 9.71291 7.79182 9.87902V11.1317C7.79182 11.2978 7.72583 11.4571 7.60837 11.5745C7.49092 11.692 7.33161 11.758 7.1655 11.758C6.99939 11.758 6.84009 11.692 6.72263 11.5745C6.60517 11.4571 6.53919 11.2978 6.53919 11.1317V9.87902C6.53919 9.71291 6.60517 9.55361 6.72263 9.43615Z", fill: "currentColor" })));
+        }
+        return null;
+    }
+    render() {
+        return (h("div", { key: 'b4cae2eac2f963a641ca23e27b33899469b2b370', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '64a2504a1844f2cb9397878ca305aa183b0609a5' }, this.stateText[this.state])));
+    }
+    static get is() { return "dropi-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeState",
+                    "resolved": "\"active\" | \"canceled\" | \"frozen\" | \"pending\"",
+                    "references": {
+                        "BadgeState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-badge/dropi-badge.tsx",
+                            "id": "src/components/dropi-badge/dropi-badge.tsx::BadgeState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge state: pending | active | canceled | frozen"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state"
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-badge-legacy/dropi-badge-legacy.css

@@ -0,0 +1,17 @@
+:host {
+  display: inline-block;
+}
+
+.badge-legacy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.badge-legacy--primary { background: var(--Primary-Primary-50); color: var(--Primary-Primary-500); }
+.badge-legacy--secondary { background: var(--Gray-Gray-100); color: var(--Gray-Gray-600); }
+.badge-legacy--tertiary { background: var(--Success-Success-50); color: var(--Success-Success-500); }

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

@@ -0,0 +1,119 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-badge-legacy
+ * Legacy badge component used in tabs and elsewhere.
+ */
+export class DropiBadgeLegacy {
+    /** Type: state | counter */
+    type = 'state';
+    /** State: check | pending */
+    state = 'check';
+    /** Variant: primary | secondary | tertiary */
+    variant = 'primary';
+    /** Count (for type counterpart) */
+    count = 0;
+    render() {
+        const isCounter = this.type === 'counter';
+        return (h("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
+                'badge-legacy': true,
+                [`badge-legacy--${this.variant}`]: true,
+                [`badge-legacy--${this.type}`]: true
+            } }, isCounter ? (h("span", { class: "badge-count" }, this.count)) : (h("span", { class: { 'badge-state-icon': true, [`badge-state--${this.state}`]: true } }, this.state === 'check' ? '✓' : '...'))));
+    }
+    static get is() { return "dropi-badge-legacy"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-badge-legacy.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-badge-legacy.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'state' | 'counter'",
+                    "resolved": "\"counter\" | \"state\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type: state | counter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'state'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'check' | 'pending'",
+                    "resolved": "\"check\" | \"pending\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State: check | pending"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'check'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant: primary | secondary | tertiary"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Count (for type counterpart)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count",
+                "defaultValue": "0"
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-banner-external/dropi-banner-external.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.dropi-banner-external {
+  display: block;
+  width: 100%;
+  position: relative;
+  margin-bottom: 16px;
+  border-radius: var(--Border-2, 8px);
+}
+
+.dropi-banner-external a {
+  display: block;
+  text-decoration: none;
+}
+
+.click-wrapper {
+  cursor: pointer;
+}
+
+.inner {
+  position: relative;
+  display: block;
+}
+
+.inner img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--Border-2, 8px);
+  max-width: 1220px;
+  margin: auto;
+}
+
+.close-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: rgba(255, 255, 255, 0.8);
+  border: none;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.15s ease;
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 1);
+}