@dropi/ui 0.1.55 → 999.0.0

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

@@ -1,48 +0,0 @@
-:host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); width: 100%; }
-button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
-*, *::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

@@ -1,181 +0,0 @@
-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 */
-    dropiIndexChange;
-    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.dropiIndexChange.emit(tab);
-    }
-    render() {
-        return (h("div", { key: '5e8facb7611d02c9b7fad97f676a50ce419c6852', 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", iconWidth: "12px", iconHeight: "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": "dropiIndexChange",
-                "name": "dropiIndexChange",
-                "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

@@ -1,49 +0,0 @@
-:host {
-  display: inline-flex;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
-
-.container-chips {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.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-xs, 12px);
-  font-weight: var(--font-weight-medium, 500);
-  line-height: var(--lineheight-large, 150%);
-  /* Animation */
-  animation: fade-in 200ms ease-out;
-}
-
-.tags.dot-variant,
-.tags.text-variant {
-  padding: 0;
-  gap: 8px;
-  background-color: transparent !important;
-  line-height: normal;
-}
-
-.dot-indicator {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-@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

@@ -1,244 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-tag
- * Colored tag/chip for statuses, categories, and labels.
- */
-export class DropiTag {
-    /** tag (default) | dot (status dot + text) | text (colored text only) */
-    variant = 'tag';
-    /** 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.variant === 'text')
-            return this.dotColor;
-        if (this.variant === 'dot' || this.showIcon) {
-            return 'var(--Gray-Gray-500)';
-        }
-        if (this.type === 'primary')
-            return `var(--Neutral-White)`;
-        const shade = this.state === 'default' ? '-500' : '-700';
-        return `var(--${base}${shade})`;
-    }
-    get dotColor() {
-        const base = this.colorMap[this.state];
-        return `var(--${base}-500)`;
-    }
-    get fontWeight() {
-        if (this.type === 'secondary' && !this.showIcon)
-            return '300';
-        return '500';
-    }
-    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: '6a50111c0057b7ef3380dde9f639e9409b7fbea9', class: "container-chips" }, h("div", { key: 'f2f78c3682aa2e8bef5f3f1b43a1729cae8ae293', class: {
-                tags: true,
-                'icon-only': this.showIcon && !this.hasContent,
-                'dot-variant': this.variant === 'dot',
-                'text-variant': this.variant === 'text'
-            }, style: {
-                backgroundColor: (this.variant === 'dot' || this.variant === 'text') ? 'transparent' : this.bgColor,
-                color: this.textColor,
-                fontWeight: this.fontWeight
-            } }, this.variant === 'dot' && (h("div", { key: '5364569230575b79b1160e06cc29046220bdf198', class: "dot-indicator", style: { backgroundColor: this.dotColor } })), this.showIcon && this.icon && (h("dropi-icon", { key: '8ea74f9ad58e7892405e3e748289b71456945de6', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.variant === 'dot' ? 'Gray-Gray-500' : this.iconColor })), this.hasContent && h("span", { key: '99409549735fd48cf0a40e411f1f236716e53939' }, 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 {
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "TagVariant",
-                    "resolved": "\"dot\" | \"tag\" | \"text\"",
-                    "references": {
-                        "TagVariant": {
-                            "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::TagVariant"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "tag (default) | dot (status dot + text) | text (colored text only)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "variant",
-                "defaultValue": "'tag'"
-            },
-            "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"
-            }, {
-                "propName": "variant",
-                "methodName": "propsChanged"
-            }];
-    }
-}

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

@@ -1,15 +0,0 @@
-:host {
-button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
-  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

@@ -1,48 +0,0 @@
-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

@@ -1,101 +0,0 @@
-:host {
-button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
-  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: var(--font-family-01, 'Inter', sans-serif);
-  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;
-}