@dropi/ui 0.1.27 → 0.1.29

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

@@ -0,0 +1,47 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.tabs-container {
+  display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; height: 52px;
+  scrollbar-width: none;
+}
+.tabs-container::-webkit-scrollbar { width: 0; height: 0; }
+
+.tab-item {
+  padding: var(--Size-4,16px) var(--Size-5,20px);
+  background: var(--Neutral-White, #ffffff);
+  border-bottom: 2px solid var(--Gray-Gray-100,#e6eaf2);
+  cursor: pointer; display: flex; gap: 16px; align-items: center;
+  white-space: nowrap; flex-shrink: 0;
+  transition: border-color 0.15s ease; user-select: none;
+}
+.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active) { border-color: var(--Gray-Gray-300,#a3abbf); }
+.tab-item--active { border-bottom: 2px solid var(--Primary-Primary-500,#f49a3d); }
+.tab-item--disabled { background: rgba(223,228,237,0.22); cursor: not-allowed; opacity: 0.7; pointer-events: none; }
+
+.tab-label-row { display: flex; align-items: center; gap: 8px; }
+.tab-label { font-size: var(--font-size-s,14px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-400,#858ea6); line-height: 20px; }
+.tab-item--active .tab-label { color: var(--Gray-Gray-600,#475066); }
+.tab-item--disabled .tab-label { font-weight: var(--font-weight-light); color: var(--Gray-Gray-300,#a3abbf); }
+
+.tab-counter {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px;
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--lineheight-simple);
+  background: var(--Gray-Gray-100,#e6eaf2); color: var(--Gray-Gray-500,#69738c);
+}
+.tab-counter--active { 
+  background-color: var(--Primary-Primary-500, #F49A3D);
+  color: var(--Neutral-White);
+}
+
+.tab-status-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--Primary-Primary-500, #f49a3d);
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,181 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tabs
+ * Horizontal tab navigation with optional counter badges and completed state icons.
+ *
+ * @example
+ * <dropi-tabs
+ *   tabs='[{"id":1,"label":"Activos"},{"id":2,"label":"Histórico","counter":5}]'
+ *   active-tab="1"
+ * />
+ */
+export class DropiTabs {
+    /** Array of TabItem or JSON string (matches Angular 'configuration') */
+    configuration = [];
+    /** Id of the active tab */
+    activeTab = 0;
+    /** Whether to show a check/pending icon per tab */
+    showIcon = false;
+    /** Stop tab action programmatically */
+    stopAction = false;
+    /** Emitted on tab click. e.detail = TabItem */
+    onIndexChanged;
+    parsedTabs = [];
+    tabsChanged(val) {
+        this.parsedTabs = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
+    }
+    componentWillLoad() {
+        this.tabsChanged(this.configuration);
+    }
+    handleClick(tab) {
+        if (tab.disabled || this.stopAction)
+            return;
+        this.activeTab = tab.id;
+        this.onIndexChanged.emit(tab);
+    }
+    render() {
+        return (h("div", { key: '337040015b29581ebb15ac347bb62220ed0a2d4d', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+            const isActive = tab.id === this.activeTab;
+            return (h("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, h("span", { class: "tab-label-row" }, h("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (h("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
+                ? h("dropi-icon", { name: "Check-circle", width: "12px", height: "12px", color: "Success-Success-500" })
+                : h("span", { class: "tab-status-dot" }))));
+        })));
+    }
+    static get is() { return "dropi-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "configuration": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabItem[] | string",
+                    "resolved": "TabItem[] | string",
+                    "references": {
+                        "TabItem": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tabs/dropi-tabs.tsx",
+                            "id": "src/components/dropi-tabs/dropi-tabs.tsx::TabItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of TabItem or JSON string (matches Angular 'configuration')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "configuration",
+                "defaultValue": "[]"
+            },
+            "activeTab": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of the active tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active-tab",
+                "defaultValue": "0"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a check/pending icon per tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "false"
+            },
+            "stopAction": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stop tab action programmatically"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stop-action",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedTabs": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onIndexChanged",
+                "name": "onIndexChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on tab click. e.detail = TabItem"
+                },
+                "complexType": {
+                    "original": "TabItem",
+                    "resolved": "TabItem",
+                    "references": {
+                        "TabItem": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tabs/dropi-tabs.tsx",
+                            "id": "src/components/dropi-tabs/dropi-tabs.tsx::TabItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "configuration",
+                "methodName": "tabsChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,39 @@
+:host {
+  display: inline-flex;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.container-chips {
+  display: inline-block;
+}
+
+.tags {
+  display: inline-flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--Border-5, 9999px);
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: var(--Size-5, 24px);
+  /* Animation */
+  animation: fade-in 200ms ease-out;
+}
+
+.tags.icon-only {
+  gap: 0;
+}
+
+.file-icon {
+  display: flex;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: scale(0.8); }
+  to   { opacity: 1; transform: scale(1); }
+}

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

@@ -0,0 +1,190 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tag
+ * Colored tag/chip for statuses, categories, and labels.
+ */
+export class DropiTag {
+    /** primary (filled) | secondary (soft) */
+    type = 'primary';
+    /** Color state of the tag */
+    state = 'default';
+    /** Whether to show the icon */
+    showIcon = false;
+    /** Icon name from the sprite */
+    icon = '';
+    /** Label text */
+    text = '';
+    colorMap = {
+        default: 'Primary-Primary',
+        success: 'Success-Success',
+        info: 'Info-Info',
+        warning: 'Warning-Warning',
+        error: 'Error-Error',
+        legacy: 'Gray-Gray',
+    };
+    propsChanged() { }
+    get bgColor() {
+        const base = this.colorMap[this.state];
+        if (this.type === 'primary')
+            return `var(--${base}-500)`;
+        const shade = this.state === 'default' || this.state === 'legacy' ? '-100' : '-50';
+        return `var(--${base}${shade})`;
+    }
+    get textColor() {
+        const base = this.colorMap[this.state];
+        if (this.type === 'primary')
+            return `var(--Neutral-White)`;
+        const shade = this.state === 'default' ? '-500' : '-700';
+        return `var(--${base}${shade})`;
+    }
+    get iconColor() {
+        if (this.type === 'primary')
+            return 'Neutral-White';
+        const base = this.colorMap[this.state];
+        const shade = this.state === 'default' ? '-500' : '-700';
+        return `${base}${shade}`;
+    }
+    get hasContent() {
+        return typeof this.text === 'string' && this.text.trim().length > 0;
+    }
+    render() {
+        return (h("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, h("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'aab0330382fe0690177edcb364ab043459b9a316', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'be38207ca7668b6b4976d5f3f2f506c380ee0491' }, this.text))));
+    }
+    static get is() { return "dropi-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagType",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {
+                        "TagType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tag/dropi-tag.tsx",
+                            "id": "src/components/dropi-tag/dropi-tag.tsx::TagType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "primary (filled) | secondary (soft)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'primary'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagState",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TagState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tag/dropi-tag.tsx",
+                            "id": "src/components/dropi-tag/dropi-tag.tsx::TagState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color state of the tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name from the sprite"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "propsChanged"
+            }, {
+                "propName": "state",
+                "methodName": "propsChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.css

@@ -0,0 +1,14 @@
+:host {
+  display: inline-block;
+}
+
+.type-variation {
+  border-radius: 4px;
+  background: var(--Warning-Warning-500);
+  padding: 2px 6px;
+  font-size: var(--font-size-xs);
+  color: var(--Neutral-White);
+  text-transform: capitalize;
+  font-weight: var(--font-weight-regular);
+  width: fit-content;
+}

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.js

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tag-type-product
+ * Tag badge showing the product variation type.
+ */
+export class DropiTagTypeProduct {
+    /** Label text. Default: VARIABLE */
+    label = 'VARIABLE';
+    render() {
+        return h("div", { key: 'ae1cd50cd3e82180704ae4f5406b4dc13ffbd12c', class: "type-variation" }, this.label);
+    }
+    static get is() { return "dropi-tag-type-product"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-tag-type-product.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-tag-type-product.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text. Default: VARIABLE"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'VARIABLE'"
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-text-area/dropi-text-area.css

@@ -0,0 +1,100 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.textarea-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.textarea-wrapper label {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.asterisk {
+  color: var(--Error-Error-500, #f46a6b);
+}
+
+.textarea-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+textarea.form-control {
+  box-sizing: border-box;
+  width: 100%;
+  flex: 1;
+  overflow: auto;
+  padding: var(--Size-3, 12px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-700, #32394d);
+  background: var(--Neutral-White, #ffffff);
+  transition: border-color 0.3s ease-in-out;
+  outline: none;
+  appearance: none;
+}
+
+textarea.form-control:focus {
+  border-color: var(--Info-Info-500, #50a5f1);
+}
+
+textarea.form-control:focus::placeholder {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+textarea.form-control-valid {
+  border-color: var(--Gray-Gray-400, #858ea6) !important;
+  color: var(--Gray-Gray-600, #475066);
+}
+
+textarea.form-control-invalid {
+  border-color: var(--Error-Error-500, #f46a6b) !important;
+  color: var(--Gray-Gray-600, #475066);
+}
+
+textarea.form-control:disabled {
+  border-color: var(--Gray-Gray-200, #c3c9d9) !important;
+  color: var(--Gray-Gray-400, #858ea6);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  cursor: not-allowed;
+}
+
+/* ── Char counter ───────────────────────────────────────────── */
+.char-counter {
+  position: absolute;
+  bottom: 10px;
+  right: 16px;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #69738c);
+  pointer-events: none;
+}
+
+/* ── Helper ─────────────────────────────────────────────────── */
+.form-control-helper {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.form-control-helper span {
+  display: block;
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-xs, 10px);
+}
+
+.invalid-color {
+  color: var(--Error-Error-500, #f46a6b) !important;
+}