@dropi/ui 0.1.22 → 0.1.23

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

@@ -1,323 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-button
- * Primary action button with multiple types, severities, sizes and states.
- * Supports pre/post icons and a loading spinner.
- */
-export class DropiButton {
-    /** Visual color palette */
-    type = 'default';
-    /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */
-    severity = 'primary';
-    /** Button size */
-    size = 'normal';
-    /** Button state */
-    state = 'default';
-    /** Full width button */
-    fullWidth = false;
-    /** Icon name to show before the text */
-    preIcon = '';
-    /** Icon name to show after the text */
-    postIcon = '';
-    /** Custom icon color override */
-    customIconColor = '';
-    /** Button label */
-    text = '';
-    /** Emitted on click (not emitted when disabled or loading) */
-    onClick;
-    colorMap = {
-        default: 'Primary-Primary-',
-        success: 'Success-Success-',
-        error: 'Error-Error-',
-        info: 'Info-Info-',
-        legacy: 'Secondary-Secondary-',
-        warning: 'Warning-Warning-',
-        dropdown: 'Gray-Gray-',
-        'default-light': 'Gray-Gray-',
-    };
-    get iconSize() {
-        if (this.size === 'large')
-            return '24px';
-        if (this.size === 'small')
-            return '16px';
-        return '18px';
-    }
-    get color() {
-        const intensity = this.state === 'disabled' ? '300' : '500';
-        return (this.colorMap[this.type] ?? 'Primary-Primary-') + intensity;
-    }
-    get fontColor() {
-        if (this.severity === 'tertiary') {
-            return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;
-        }
-        if (this.severity === 'secondary')
-            return this.color;
-        return 'Neutral-White';
-    }
-    handleClick(e) {
-        if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.onClick.emit(e);
-        }
-    }
-    renderLoadingSpinner() {
-        return (h("svg", { class: "spin", width: this.iconSize, height: this.iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z", fill: `var(--${this.fontColor})` })));
-    }
-    render() {
-        const isDisabled = this.state === 'disabled' || this.state === 'loading';
-        const hasText = this.text !== '';
-        const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
-        const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (h("button", { key: 'd21aeb2274c317795bb0daad6d30c2bc9f3ede9f', class: {
-                btn: true,
-                'without-text': !hasText,
-                [this.severity]: true,
-                [this.type]: true,
-                [this.size]: true,
-                [this.state]: true,
-                'full-width': this.fullWidth,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '6711ece5a9c871db989e6bc4572c0d0ebfa7f899', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '9fc49de08b5672c6e2dae9b3cea9587d451fac0d', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '1ce254e23b16fb7013469fb3e2d71fe70dba5a9d', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '72857295b27aa6ef6981276d68497f33958a584c' })));
-    }
-    static get is() { return "dropi-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-button.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-button.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonType",
-                    "resolved": "\"default\" | \"default-light\" | \"dropdown\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
-                    "references": {
-                        "ButtonType": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
-                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Visual color palette"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'default'"
-            },
-            "severity": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonSeverity",
-                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
-                    "references": {
-                        "ButtonSeverity": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
-                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonSeverity"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Primary (filled) | Secondary (outlined) | Tertiary (ghost)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "severity",
-                "defaultValue": "'primary'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonSize",
-                    "resolved": "\"large\" | \"normal\" | \"small\"",
-                    "references": {
-                        "ButtonSize": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
-                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Button size"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'normal'"
-            },
-            "state": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonState",
-                    "resolved": "\"default\" | \"disabled\" | \"loading\"",
-                    "references": {
-                        "ButtonState": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
-                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonState"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Button state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "state",
-                "defaultValue": "'default'"
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Full width button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "full-width",
-                "defaultValue": "false"
-            },
-            "preIcon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Icon name to show before the text"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "pre-icon",
-                "defaultValue": "''"
-            },
-            "postIcon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Icon name to show after the text"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "post-icon",
-                "defaultValue": "''"
-            },
-            "customIconColor": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom icon color override"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "custom-icon-color",
-                "defaultValue": "''"
-            },
-            "text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Button label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text",
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "onClick",
-                "name": "onClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted on click (not emitted when disabled or loading)"
-                },
-                "complexType": {
-                    "original": "MouseEvent",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                }
-            }];
-    }
-}

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.css

@@ -1,92 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-.container-card-check {
-  padding: var(--Size-4, 16px);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Size-2, 8px);
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: var(--Size-3, 12px);
-  cursor: pointer;
-  height: 66px;
-  overflow: hidden;
-  transition: background 0.15s ease, border-color 0.15s ease;
-}
-
-.container-card-check.disabled {
-  border-radius: var(--Border-2, 8px);
-  border: 1px solid var(--Gray-Gray-100, #e6eaf2);
-  background-color: var(--Gray-Gray-50, #f7f8fa);
-  cursor: default;
-}
-
-.container-card-check.disabled .title-check,
-.container-card-check.disabled .description-text,
-.container-card-check.disabled .extra-info {
-  color: var(--Gray-Gray-400, #858ea6);
-}
-
-.container-text {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  text-align: start;
-  overflow: hidden;
-}
-
-.title-check {
-  color: var(--Gray-Gray-700, #32394d);
-  font-size: var(--font-size-m, 14px);
-  font-weight: var(--font-weight-regular, 400);
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.description-text {
-  color: var(--Gray-Gray-500, #69738c);
-  font-size: var(--font-size-s, 12px);
-  margin-top: var(--Size-1, 4px);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.extra-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: column;
-  gap: 4px;
-  flex-shrink: 0;
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-600, #475066);
-}
-
-.extra-info h4 {
-  margin: 0;
-  font-weight: var(--font-weight-semibold);
-  color: inherit;
-  line-height: inherit;
-}
-
-.default-card {
-  border: none;
-}
-
-.is-checked {
-  background: var(--Primary-Primary-50, #fff8f0);
-  border: 1px solid var(--Primary-Primary-500, #f49a3d);
-}

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.js

@@ -1,222 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-card-checkbox
- * Card-style clickable checkbox with title, description, and optional extra info.
- *
- * @example
- * <dropi-card-checkbox
- *   title="Opción A"
- *   description="Descripción breve"
- *   type="with-card"
- *   checked
- * ></dropi-card-checkbox>
- */
-export class DropiCardCheckbox {
-    /** Visual type — matches Angular: 'default' | 'with card' */
-    type = 'default';
-    /** Whether the checkbox is checked — matches Angular 'state' */
-    state = 'checked';
-    /** Main title — matches Angular 'title' */
-    title = 'Tittle';
-    /** Optional description below title */
-    description = '';
-    /** Optional extra info shown on the right */
-    extraInfo = '';
-    /** Optional extra info description shown below extraInfo */
-    extraInfoDescription = '';
-    /** Disables interaction */
-    disabled = false;
-    /** Emitted with the new checked state when clicked */
-    onChange;
-    get isChecked() {
-        return this.state === 'checked';
-    }
-    handleClick() {
-        if (this.disabled)
-            return;
-        this.state = this.isChecked ? 'default' : 'checked';
-        this.onChange.emit(this.isChecked);
-    }
-    render() {
-        return (h("div", { key: '238a146e7500efbc01d83a8494ee577fbb600729', class: {
-                'container-card-check': true,
-                'default-card': this.type === 'default',
-                'is-checked': this.isChecked && this.type === 'with card',
-                'disabled': this.disabled,
-            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '405d834de33790be58fba7e50b0e579889f04394', checked: this.isChecked, disabled: this.disabled }), h("div", { key: '49659771de9ca8ee8c2fa9fbe828a1d94fbd3c9e', class: "container-text" }, h("div", { key: '7d39435ef56cd61605e9d9b69d6917e3ec8470fa', class: "title-check" }, this.title), this.description && h("div", { key: '00a7723401979d7a9d926ce939eb09430ddb7372', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '4d1c9e49f6e397f0433827960167ff88bcd669db', class: "extra-info" }, this.extraInfo && h("div", { key: 'b9da8514c2013cd6cab9cf6005dad8d3ae30b930' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'ac2fcbc6359ea173911f181b2a145de59af10c9d' }, this.extraInfoDescription)))));
-    }
-    static get is() { return "dropi-card-checkbox"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-card-checkbox.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-card-checkbox.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'default' | 'with card'",
-                    "resolved": "\"default\" | \"with card\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Visual type \u2014 matches Angular: 'default' | 'with card'"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'default'"
-            },
-            "state": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "'checked' | 'default'",
-                    "resolved": "\"checked\" | \"default\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the checkbox is checked \u2014 matches Angular 'state'"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "state",
-                "defaultValue": "'checked'"
-            },
-            "title": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Main title \u2014 matches Angular 'title'"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "title",
-                "defaultValue": "'Tittle'"
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional description below title"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description",
-                "defaultValue": "''"
-            },
-            "extraInfo": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional extra info shown on the right"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "extra-info",
-                "defaultValue": "''"
-            },
-            "extraInfoDescription": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional extra info description shown below extraInfo"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "extra-info-description",
-                "defaultValue": "''"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Disables interaction"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "onChange",
-                "name": "onChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted with the new checked state when clicked"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-}