@dropi/ui 0.1.16 → 0.1.17

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

@@ -0,0 +1,241 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-paginator
+ * Pagination control with page numbers, prev/next buttons and items-per-page selector.
+ */
+export class DropiPaginator {
+    /** Total number of items */
+    total = 0;
+    /** Items per page */
+    pageSize = 10;
+    /** Current page (1-based) */
+    page = 1;
+    /** Max page buttons to show at once */
+    maxPages = 5;
+    /** Whether to show the items-per-page selector */
+    showPageSizeSelector = false;
+    /** Options for items per page */
+    pageSizeOptions = [10, 25, 50, 100];
+    /** Emitted when page changes. e.detail = { page, pageSize } */
+    dropiPageChange;
+    parsedOptions = [10, 25, 50, 100];
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.pageSizeOptions);
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.total / this.pageSize));
+    }
+    get pageNumbers() {
+        const total = this.totalPages;
+        const cur = this.page;
+        const max = this.maxPages;
+        if (total <= max)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const half = Math.floor(max / 2);
+        let start = Math.max(1, cur - half);
+        let end = Math.min(total, start + max - 1);
+        if (end - start < max - 1)
+            start = Math.max(1, end - max + 1);
+        const pages = [];
+        if (start > 1) {
+            pages.push(1);
+            if (start > 2)
+                pages.push('...');
+        }
+        for (let i = start; i <= end; i++)
+            pages.push(i);
+        if (end < total) {
+            if (end < total - 1)
+                pages.push('...');
+            pages.push(total);
+        }
+        return pages;
+    }
+    goTo(p) {
+        if (p < 1 || p > this.totalPages || p === this.page)
+            return;
+        this.page = p;
+        this.dropiPageChange.emit({ page: this.page, pageSize: this.pageSize });
+    }
+    onPageSizeChange(e) {
+        this.pageSize = Number(e.target.value);
+        this.page = 1;
+        this.dropiPageChange.emit({ page: this.page, pageSize: this.pageSize });
+    }
+    render() {
+        const pages = this.pageNumbers;
+        const isFirst = this.page <= 1;
+        const isLast = this.page >= this.totalPages;
+        return (h("div", { key: '3fbb545d6ff0b345da7698e51bfdee51a13de49e', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: '7ae643988a60f2016dce24b53bb9f5ac13414cf0', class: "paginator-size" }, h("span", { key: 'fee6db32b0d13e6c455174f1c57fb35401e65c10', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: '0e37733de81c70ac274c8e89af65f0f94115ecb5', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'fb70589d0fd3d8072190099fe187359439707dc1', class: "paginator-pages" }, h("button", { key: '6348dda14005ed8dcd3e96d788715bbd5a9d432e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isFirst, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '2b2c17304b3c246a660b71f5ab5feedfb93ba044', name: "Dropdown-left", width: "16px", height: "16px", color: isFirst ? 'Gray-Gray-300' : 'Gray-Gray-600' })), pages.map((p, i) => p === '...'
+            ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), h("button", { key: 'fea38306411fd4a73f35231ff632d8846301dd5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isLast, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, h("dropi-icon", { key: 'f7ed587cb578ef0b9872f290cdc17eebe2f9efeb', name: "Dropdown-Right", width: "16px", height: "16px", color: isLast ? 'Gray-Gray-300' : 'Gray-Gray-600' })))));
+    }
+    static get is() { return "dropi-paginator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-paginator.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-paginator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "0"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items per page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "10"
+            },
+            "page": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "page",
+                "defaultValue": "1"
+            },
+            "maxPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max page buttons to show at once"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-pages",
+                "defaultValue": "5"
+            },
+            "showPageSizeSelector": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the items-per-page selector"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-page-size-selector",
+                "defaultValue": "false"
+            },
+            "pageSizeOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options for items per page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size-options",
+                "defaultValue": "[10, 25, 50, 100]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiPageChange",
+                "name": "dropiPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when page changes. e.detail = { page, pageSize }"
+                },
+                "complexType": {
+                    "original": "{ page: number; pageSize: number }",
+                    "resolved": "{ page: number; pageSize: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "pageSizeOptions",
+                "methodName": "optionsChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -28,7 +28,7 @@ export class DropiRadioButton {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: '3b31699bf088bee52465981074c0aea48b6fe112', class: "dropi-radio-button" }, h("label", { key: '072d19bd9c88739b849db0e264c65183eaab2132', htmlFor: this.inputId }, h("input", { key: '82d1600002e9dc2795cdc5c731997742adc8e2db', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: 'fd1153aa79130eeb865c0289b7e323bdf2459a8c', class: "dropi-radio-button" }, h("label", { key: 'b4fbe10ac36213905779f0976e2e80b549323a52', htmlFor: this.inputId }, h("input", { key: '8f9b74ed53912bdff637b879a50faf4d83b7d62b', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -315,7 +315,7 @@ export class DropiSelect {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: '94383b3267955dcb8d1a6c523730e291976157b2', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '4ff14d77b301a275f6c608d227361ff2829ac7a1', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '8345af7646d8cea8e66c996f0eb4abf210c9d211', class: "asterisk" }, " *"))), h("div", { key: '290a9521e39c2e1bdb1a8aacf35b2b22bf4966de', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'a9ad2741e23d31b3b0dc69a3aa89f54eaa291b04', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: '8dd7cd895c1124b07020f396ac316390d4ee8cc8', class: "select-helper" }, h("span", { key: 'cdcaeb30b27baf4441d6ef87f6f553fd2b73e145' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '8e1a4da603de7b6c730a9946b63652fbe5e68321', class: "select-helper-error" }, h("dropi-icon", { key: 'f831c9f543c4f4be52d969f1d26f7d7e8816d08f', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '1eefbade098b9743b23abee3e43836ed33ecbadb' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: '0062ad3d0ca25d9126dff2f8130c9159a6b356f6', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'ad5db5fa4fe19ee2200ab65fd1f3fcdf65bd851f', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '27e474c585d345168d01e156acf8fdaa9c70dbfc', class: "asterisk" }, " *"))), h("div", { key: '2cc4da6a0109022a7bdb21b4b7410cf1ea2a6c01', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'c60838f5ce7a250bb36164a989b68c93973aa661', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'a30c3cb4f8abf4b820c1e1d73005547398c8ff12', class: "select-helper" }, h("span", { key: '239dffdcdc8bceca6c21b0160a78078acf96eb09' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '76fced13295c9dff83389920caf128430c2fd35c', class: "select-helper-error" }, h("dropi-icon", { key: 'f1c5798ee5f504387ba80a4ddeca817a6416b770', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '84a93d1b293b2abe0027316c6fd9824410f20efd' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.skeleton-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--Gray-Gray-100, #e6eaf2) 25%,
+    var(--Gray-Gray-50, #f7f8fa) 50%,
+    var(--Gray-Gray-100, #e6eaf2) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.6s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}

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

@@ -0,0 +1,162 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-skeleton
+ * Loading placeholder with shimmer animation.
+ */
+export class DropiSkeleton {
+    /** Shape variant: 'text' | 'circle' | 'rect' */
+    variant = 'text';
+    /** Width (CSS value, e.g. "100%", "200px") */
+    width = '100%';
+    /** Height (CSS value, e.g. "16px", "48px") */
+    height = '16px';
+    /** Border radius override */
+    borderRadius = '';
+    /** Number of lines to repeat (text variant only) */
+    lines = 1;
+    getRadius() {
+        if (this.borderRadius)
+            return this.borderRadius;
+        if (this.variant === 'circle')
+            return '50%';
+        if (this.variant === 'text')
+            return '4px';
+        return 'var(--Border-1, 4px)';
+    }
+    render() {
+        if (this.variant === 'text' && this.lines > 1) {
+            return (h("div", { class: "skeleton-lines" }, Array.from({ length: this.lines }).map((_, i) => (h("div", { class: "skeleton", style: {
+                    width: i === this.lines - 1 ? '70%' : this.width,
+                    height: this.height,
+                    borderRadius: this.getRadius(),
+                } })))));
+        }
+        return (h("div", { class: "skeleton", style: {
+                width: this.width,
+                height: this.height,
+                borderRadius: this.getRadius(),
+            } }));
+    }
+    static get is() { return "dropi-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SkeletonVariant",
+                    "resolved": "\"circle\" | \"rect\" | \"text\"",
+                    "references": {
+                        "SkeletonVariant": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-skeleton/dropi-skeleton.tsx",
+                            "id": "src/components/dropi-skeleton/dropi-skeleton.tsx::SkeletonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape variant: 'text' | 'circle' | 'rect'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'text'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width (CSS value, e.g. \"100%\", \"200px\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height (CSS value, e.g. \"16px\", \"48px\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'16px'"
+            },
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border radius override"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-radius",
+                "defaultValue": "''"
+            },
+            "lines": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of lines to repeat (text variant only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lines",
+                "defaultValue": "1"
+            }
+        };
+    }
+}

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

@@ -16,7 +16,7 @@ export class DropiSwitch {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: '336fa18042e7b128d2e6e0b680ddd67e30ce917e', class: "toggle-switch" }, h("input", { key: '57e2fa77fa9b49341b03f6ff041ce4987a6b277b', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'e7617599947289a6e21b9db573dd7bec80dbeb43', class: "slider" })));
+        return (h("label", { key: '790db7283a976472fd3f8de502f73ece29134878', class: "toggle-switch" }, h("input", { key: '7199dcfb1a4f81eb30d7510966d56fd0111d648f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '2c62e927e77e58993ab44f2b4fafefcea556b71e', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,42 @@
+: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,#fff);
+  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-m,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: 300; 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-xs,10px); font-weight: var(--font-weight-medium,500);
+  background: var(--Gray-Gray-100,#e6eaf2); color: var(--Gray-Gray-500,#69738c);
+}
+.tab-counter--active { background: var(--Primary-Primary-100,#fde8d0); color: var(--Primary-Primary-500,#f49a3d); }
+
+.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,159 @@
+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 */
+    tabs = [];
+    /** Id of the active tab */
+    activeTab = 0;
+    /** Whether to show a check/pending icon per tab */
+    showIcon = false;
+    /** Emitted on tab click. e.detail = TabItem */
+    dropiTabChange;
+    parsedTabs = [];
+    tabsChanged(val) {
+        this.parsedTabs = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
+    }
+    componentWillLoad() {
+        this.tabsChanged(this.tabs);
+    }
+    handleClick(tab) {
+        if (tab.disabled)
+            return;
+        this.activeTab = tab.id;
+        this.dropiTabChange.emit(tab);
+    }
+    render() {
+        return (h("div", { key: '5b28faac5789a5e29aa68fe2892854cdebccda75', 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 {
+            "tabs": {
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tabs",
+                "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedTabs": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiTabChange",
+                "name": "dropiTabChange",
+                "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": "tabs",
+                "methodName": "tabsChanged"
+            }];
+    }
+}