@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,69 +0,0 @@
-:host {
-  display: block;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-.breadcrumb {
-  margin: 0;
-}
-
-.crumb-list {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: wrap;
-}
-
-.crumb-home {
-  display: flex;
-  padding-right: 4px;
-  align-items: center;
-  gap: 4px;
-}
-
-.home-link {
-  display: inline-flex;
-  align-items: center;
-  color: var(--Gray-Gray-500, #69738c);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-.home-link:hover {
-  color: var(--Gray-Gray-700, #32394d);
-}
-
-.crumb {
-  display: flex;
-  padding: 0 4px;
-  align-items: center;
-  gap: 8px;
-}
-
-.crumb-link {
-  color: var(--Gray-Gray-500, #69738c);
-  text-align: center;
-  cursor: pointer;
-  text-decoration: none;
-  transition: color 0.2s ease;
-  font-size: var(--font-size-s, 12px);
-}
-
-.crumb-link:hover {
-  color: var(--Gray-Gray-700, #32394d);
-  text-decoration: underline;
-}
-
-.crumb-link.disabled {
-  pointer-events: none;
-  color: var(--Gray-Gray-300, #a1a8b8);
-  cursor: not-allowed;
-  text-decoration: none;
-}
-
-.current {
-  color: var(--Gray-Gray-700, #32394d);
-  cursor: default;
-  font-size: var(--font-size-s, 12px);
-}

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

@@ -1,171 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-breadcrumb
- * Navigation breadcrumb with home icon and items.
- *
- * @example
- * <dropi-breadcrumb
- *   items='[{"label":"Productos","routerLink":"/products"},{"label":"Detalle"}]'
- * ></dropi-breadcrumb>
- */
-export class DropiBreadcrumb {
-    /** Breadcrumb items (array or JSON string). Last item is rendered as current. */
-    items = [];
-    /** Home link href */
-    homeRoute = '/';
-    /** dropi-icon name for home */
-    homeIconName = 'Home';
-    /** Whether the last item is also clickable */
-    lastItemClickable = false;
-    /** Emitted when any item or home is clicked. Detail is the item or homeRoute string. */
-    dropiNavigate;
-    get parsedItems() {
-        if (typeof this.items === 'string') {
-            try {
-                return JSON.parse(this.items);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.items;
-    }
-    render() {
-        const items = this.parsedItems;
-        return (h("nav", { key: '03396956a168feaa860265e9962d9c5cbca8b23f', class: "breadcrumb", "aria-label": "Breadcrumb" }, h("div", { key: '88e05f4ea225b26a9686bc9f1a01e8e3710806dc', class: "crumb-list" }, h("div", { key: '54e0dfc3bbef05a3041d187cd9ec0536f69c34e3', class: "crumb-home" }, h("a", { key: '31c971efc13b5122ff2775ee2f79b25c06a01b0f', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, h("dropi-icon", { key: '8a436c3d254884e4479713a9c6981929bb91df55', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (h("dropi-icon", { key: 'f57beceaa6dab5ed00a2c1c38ff43ea6bce040f5', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
-            const isLast = idx === items.length - 1;
-            const href = item.url || item.routerLink || '#';
-            return (h("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (h("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {
-                    e.preventDefault();
-                    if (!item.disabled)
-                        this.dropiNavigate.emit(item);
-                } }, item.label)) : (h("span", { class: "current Body-S-Regular", "aria-current": "page" }, item.label)), !isLast && (h("dropi-icon", { name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-500" }))));
-        }))));
-    }
-    static get is() { return "dropi-breadcrumb"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-breadcrumb.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-breadcrumb.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "items": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "BreadcrumbItem[] | string",
-                    "resolved": "BreadcrumbItem[] | string",
-                    "references": {
-                        "BreadcrumbItem": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-breadcrumb/dropi-breadcrumb.tsx",
-                            "id": "src/components/dropi-breadcrumb/dropi-breadcrumb.tsx::BreadcrumbItem"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Breadcrumb items (array or JSON string). Last item is rendered as current."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "items",
-                "defaultValue": "[]"
-            },
-            "homeRoute": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Home link href"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "home-route",
-                "defaultValue": "'/'"
-            },
-            "homeIconName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "dropi-icon name for home"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "home-icon-name",
-                "defaultValue": "'Home'"
-            },
-            "lastItemClickable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the last item is also clickable"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "last-item-clickable",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dropiNavigate",
-                "name": "dropiNavigate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when any item or home is clicked. Detail is the item or homeRoute string."
-                },
-                "complexType": {
-                    "original": "BreadcrumbItem | string",
-                    "resolved": "BreadcrumbItem | string",
-                    "references": {
-                        "BreadcrumbItem": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-breadcrumb/dropi-breadcrumb.tsx",
-                            "id": "src/components/dropi-breadcrumb/dropi-breadcrumb.tsx::BreadcrumbItem"
-                        }
-                    }
-                }
-            }];
-    }
-}

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

@@ -1,177 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-:host([full-width]) {
-  display: flex;
-  width: 100%;
-}
-:host([full-width]) .btn {
-  width: 100%;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-.btn {
-  all: unset;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--Size-1, 4px);
-  border-radius: var(--Border-2, 8px);
-  font-weight: var(--font-weight-bold);
-  min-width: 33px;
-  line-height: 110%;
-  cursor: pointer;
-  white-space: nowrap;
-  transition:
-    background 0.25s ease,
-    color 0.25s ease,
-    border-color 0.25s ease,
-    transform 0.25s ease;
-}
-
-.btn:active {
-  transition: transform 0.01s ease-out;
-  transform: scale(0.98);
-}
-
-.btn:hover:not(:active) {
-  transform: scale(1.01);
-}
-
-.btn.without-text {
-  gap: 0;
-}
-
-/* ── Sizes ─────────────────────────────────────────────────── */
-.btn.large  { padding: var(--Size-4, 16px); font-size: var(--Size-4, 16px); height: 48px; }
-.btn.normal { padding: var(--Size-3, 12px); font-size: var(--font-size-s, 12px); height: 40px; }
-.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--font-size-s, 12px); height: 29px; }
-
-/* ── Disabled / Loading ─────────────────────────────────────── */
-.btn.disabled,
-.btn.loading {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* ══════════════════════════════════════════════════════════════
-   PRIMARY severity
-═══════════════════════════════════════════════════════════════ */
-.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #ffffff); }
-.btn.primary.default:hover { background: var(--Primary-Primary-600, #e58017); }
-
-.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #ffffff); }
-.btn.primary.success:hover { background: var(--Success-Success-600, #09aa7b); }
-
-.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #ffffff); }
-.btn.primary.info:hover { background: var(--Info-Info-600, #4996db); }
-
-.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #ffffff); }
-.btn.primary.error:hover { background: var(--Error-Error-600, #de6061); }
-
-.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #ffffff); }
-.btn.primary.warning:hover { background: var(--Warning-Warning-600, #dba445); }
-
-.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #ffffff); }
-.btn.primary.legacy:hover { background: var(--Secondary-Secondary-600, #007199); }
-
-/* Disabled primary */
-.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #ffffff); }
-.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #ffffff); }
-.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #ffffff); }
-.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #ffffff); }
-.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #ffffff); }
-.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #ffffff); }
-
-/* ══════════════════════════════════════════════════════════════
-   SECONDARY severity
-═══════════════════════════════════════════════════════════════ */
-.btn.secondary {
-  background: var(--Neutral-White, #ffffff);
-  border: 1px solid;
-}
-
-.btn.secondary.default  { border-color: var(--Primary-Primary-500, #f49a3d); color: var(--Primary-Primary-500, #f49a3d); }
-.btn.secondary.default:hover { color: var(--Primary-Primary-600, #e58017); border-color: var(--Primary-Primary-600, #e58017); }
-
-.btn.secondary.success  { border-color: var(--Success-Success-500, #0abb87); color: var(--Success-Success-500, #0abb87); }
-.btn.secondary.success:hover { color: var(--Success-Success-600, #09aa7b); border-color: var(--Success-Success-600, #09aa7b); }
-
-.btn.secondary.info     { border-color: var(--Info-Info-500, #50a5f1); color: var(--Info-Info-500, #50a5f1); }
-.btn.secondary.info:hover { color: var(--Info-Info-600, #4996db); border-color: var(--Info-Info-600, #4996db); }
-
-.btn.secondary.error    { border-color: var(--Error-Error-500, #f46a6b); color: var(--Error-Error-500, #f46a6b); }
-.btn.secondary.error:hover { color: var(--Error-Error-600, #de6061); border-color: var(--Error-Error-600, #de6061); }
-
-.btn.secondary.warning  { border-color: var(--Warning-Warning-500, #f1b44c); color: var(--Warning-Warning-500, #f1b44c); }
-.btn.secondary.warning:hover { color: var(--Warning-Warning-600, #dba445); border-color: var(--Warning-Warning-600, #dba445); }
-
-.btn.secondary.legacy   { border-color: var(--Secondary-Secondary-500, #008dbf); color: var(--Secondary-Secondary-500, #008dbf); }
-.btn.secondary.legacy:hover { color: var(--Secondary-Secondary-600, #007199); border-color: var(--Secondary-Secondary-600, #007199); }
-
-/* Disabled secondary */
-.btn.secondary.disabled.default  { border-color: var(--Primary-Primary-300, #f2bc85); color: var(--Primary-Primary-300, #f2bc85); }
-.btn.secondary.disabled.success  { border-color: var(--Success-Success-300, #5bd1af); color: var(--Success-Success-300, #5bd1af); }
-.btn.secondary.disabled.info     { border-color: var(--Info-Info-300, #8ac3f6); color: var(--Info-Info-300, #8ac3f6); }
-.btn.secondary.disabled.error    { border-color: var(--Error-Error-300, #f89b9c); color: var(--Error-Error-300, #f89b9c); }
-.btn.secondary.disabled.warning  { border-color: var(--Warning-Warning-300, #f6cd87); color: var(--Warning-Warning-300, #f6cd87); }
-.btn.secondary.disabled.legacy   { border-color: var(--Secondary-Secondary-300, #62bad9); color: var(--Secondary-Secondary-300, #62bad9); }
-
-/* ══════════════════════════════════════════════════════════════
-   TERTIARY severity
-═══════════════════════════════════════════════════════════════ */
-.btn.tertiary { background: none; border: none; }
-
-.btn.tertiary.default,
-.btn.tertiary.legacy {
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  color: var(--Gray-Gray-500, #69738c);
-}
-.btn.tertiary.default:hover,
-.btn.tertiary.legacy:hover {
-  border-color: var(--Gray-Gray-400, #858ea6);
-  color: var(--Gray-Gray-600, #475066);
-}
-
-.btn.tertiary.success { color: var(--Success-Success-500, #0abb87); }
-.btn.tertiary.success:hover { background: var(--Success-Success-50, #e7f8f3); }
-
-.btn.tertiary.info { color: var(--Info-Info-500, #50a5f1); }
-.btn.tertiary.info:hover { background: var(--Info-Info-50, #eef6fe); }
-
-.btn.tertiary.error { color: var(--Error-Error-500, #f46a6b); }
-.btn.tertiary.error:hover { background: var(--Error-Error-50, #fef0f0); }
-
-.btn.tertiary.warning { color: var(--Warning-Warning-500, #f1b44c); }
-.btn.tertiary.warning:hover { background: var(--Warning-Warning-50, #fef8ed); }
-
-.btn.tertiary.dropdown {
-  color: var(--Gray-Gray-500, #69738c);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-s);
-  background: transparent;
-}
-
-/* Disabled tertiary */
-.btn.tertiary.disabled.default,
-.btn.tertiary.disabled.legacy {
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  color: var(--Gray-Gray-400, #858ea6);
-}
-.btn.tertiary.disabled.success { color: var(--Success-Success-300, #5bd1af); }
-.btn.tertiary.disabled.info    { color: var(--Info-Info-300, #8ac3f6); }
-.btn.tertiary.disabled.error   { color: var(--Error-Error-300, #f89b9c); }
-.btn.tertiary.disabled.warning { color: var(--Warning-Warning-300, #f6cd87); }
-
-/* ── Loading spinner ─────────────────────────────────────────── */
-.spin {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-}