@sula-tech/webcomponents 0.16.0 → 0.17.0

package/dist/collection/components/sula-toggle/model/sula-toggle.model.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sula-toggle.model.js.map

package/dist/collection/components/sula-toggle/model/sula-toggle.model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-toggle.model.js","sourceRoot":"","sources":["../../../../src/components/sula-toggle/model/sula-toggle.model.ts"],"names":[],"mappings":"","sourcesContent":["export interface SulaToggleEvent {\n  selected: boolean;\n}\n"]}

package/dist/collection/components/sula-toggle/sula-toggle.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#012b15;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#330d00;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#402705;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#401204;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f3f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.static{position:static}.flex{display:flex}.h-\[40px\]{height:40px}.w-\[40px\]{width:40px}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-xxl{border-radius:18.75rem}.border-none{border-style:none}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.p-8{padding:.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.leading-6{line-height:1.5rem}.text-feedback-error{color:var(--color-feedback-error)}.text-icon-primary{color:var(--color-icon-primary)}.text-text-disabled{color:var(--color-text-disabled)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.focus\:outline:focus{outline-style:solid}.focus\:outline-2:focus{outline-width:2px}.focus\:outline-offset-2:focus{outline-offset:2px}.focus\:outline-feedback-informational:focus{outline-color:var(--color-feedback-informational)}.active\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}.active\:text-feedback-error:active{color:var(--color-feedback-error)}

package/dist/collection/components/sula-toggle/sula-toggle.js

@@ -0,0 +1,150 @@
+import { Host, h } from "@stencil/core";
+export class SulaToggle {
+    constructor() {
+        /**
+         * Whether the favorite is selected (filled heart)
+         */
+        this.selected = false;
+        /**
+         * Whether the button is disabled
+         */
+        this.buttonDisabled = false;
+        /**
+         * Icon name (Phosphor Icons) without the prefix.
+         * @default 'heart'
+         */
+        this.icon = 'heart';
+        this.handleClick = () => {
+            if (!this.buttonDisabled) {
+                this.selected = !this.selected;
+                this.toggleClicked.emit({ selected: this.selected });
+            }
+        };
+    }
+    getIconName() {
+        return this.selected ? `ph-fill ph-${this.icon}` : `ph ph-${this.icon}`;
+    }
+    getIconColorClass() {
+        if (this.buttonDisabled) {
+            return 'text-text-disabled';
+        }
+        return this.selected ? 'text-feedback-error' : 'text-icon-primary';
+    }
+    getButtonClass() {
+        const base = 'flex justify-center items-center w-[40px] h-[40px] p-8 rounded-xxl cursor-pointer transition-colors duration-200 ease-in-out focus:outline focus:outline-2 focus:outline-feedback-informational focus:outline-offset-2';
+        if (this.buttonDisabled) {
+            return `${base} bg-states-bg-disabled border-none cursor-not-allowed`;
+        }
+        return `${base} bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed`;
+    }
+    render() {
+        return (h(Host, { key: '30d1fe15a8095b23952353c7a5406b8be01474a0' }, h("button", { key: 'dd35f75599e716093bb59c3da13fa1b5d8183516', id: "favorite-button", class: this.getButtonClass(), disabled: this.buttonDisabled, onClick: this.handleClick, "aria-pressed": this.selected ? 'true' : 'false', "aria-label": this.selected ? 'Remover dos favoritos' : 'Adicionar aos favoritos' }, h("sula-icon", { key: '36883b0c589cf78d36825320a2a3ef896b86d5b8', icon: this.getIconName(), customClass: `text-2xl ${this.getIconColorClass()} ${!this.buttonDisabled && !this.selected ? 'active:text-feedback-error' : ''}`, class: "flex leading-6" }))));
+    }
+    static get is() { return "sula-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-toggle.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "attribute": "selected",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the favorite is selected (filled heart)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "buttonDisabled": {
+                "type": "boolean",
+                "attribute": "button-disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'heart'"
+                        }],
+                    "text": "Icon name (Phosphor Icons) without the prefix."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'heart'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleClicked",
+                "name": "toggleClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "note",
+                            "text": "If button is disabled, the event won't be emitted"
+                        }],
+                    "text": "Event emitted when the toggle button is clicked."
+                },
+                "complexType": {
+                    "original": "SulaToggleEvent",
+                    "resolved": "SulaToggleEvent",
+                    "references": {
+                        "SulaToggleEvent": {
+                            "location": "import",
+                            "path": "./model/sula-toggle.model",
+                            "id": "src/components/sula-toggle/model/sula-toggle.model.ts::SulaToggleEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sula-toggle.js.map

package/dist/collection/components/sula-toggle/sula-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-toggle.js","sourceRoot":"","sources":["../../../src/components/sula-toggle/sula-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,UAAU;IALvB;QAME;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;WAEG;QACsB,mBAAc,GAAY,KAAK,CAAC;QAEzD;;;WAGG;QACK,SAAI,GAAW,OAAO,CAAC;QA8B/B,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACzB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YACvD,CAAC;QACH,CAAC,CAAC;KAsBH;IAhDS,WAAW;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC;IAC1E,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,oBAAoB,CAAC;QAC9B,CAAC;QACD,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IACrE,CAAC;IAEO,cAAc;QACpB,MAAM,IAAI,GAAG,wNAAwN,CAAC;QAEtO,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO,GAAG,IAAI,uDAAuD,CAAC;QACxE,CAAC;QAED,OAAO,GAAG,IAAI,sFAAsF,CAAC;IACvG,CAAC;IASD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DACE,EAAE,EAAC,iBAAiB,EACpB,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,kBACX,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAClC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,yBAAyB;gBAE/E,kEACE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EACxB,WAAW,EAAE,YAAY,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,EAAE,EACjI,KAAK,EAAC,gBAAgB,GACX,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaToggleEvent } from './model/sula-toggle.model';\n\n@Component({\n  tag: 'sula-toggle',\n  styleUrl: 'sula-toggle.scss',\n  shadow: true,\n})\nexport class SulaToggle {\n  /**\n   * Whether the favorite is selected (filled heart)\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop({ mutable: true }) buttonDisabled: boolean = false;\n\n  /**\n   * Icon name (Phosphor Icons) without the prefix.\n   * @default 'heart'\n   */\n  @Prop() icon: string = 'heart';\n\n  /**\n   * Event emitted when the toggle button is clicked.\n   * @note If button is disabled, the event won't be emitted\n   */\n  @Event()\n  toggleClicked!: EventEmitter<SulaToggleEvent>;\n\n  private getIconName(): string {\n    return this.selected ? `ph-fill ph-${this.icon}` : `ph ph-${this.icon}`;\n  }\n\n  private getIconColorClass(): string {\n    if (this.buttonDisabled) {\n      return 'text-text-disabled';\n    }\n    return this.selected ? 'text-feedback-error' : 'text-icon-primary';\n  }\n\n  private getButtonClass() {\n    const base = 'flex justify-center items-center w-[40px] h-[40px] p-8 rounded-xxl cursor-pointer transition-colors duration-200 ease-in-out focus:outline focus:outline-2 focus:outline-feedback-informational focus:outline-offset-2';\n\n    if (this.buttonDisabled) {\n      return `${base} bg-states-bg-disabled border-none cursor-not-allowed`;\n    }\n\n    return `${base} bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed`;\n  }\n\n  handleClick = () => {\n    if (!this.buttonDisabled) {\n      this.selected = !this.selected;\n      this.toggleClicked.emit({ selected: this.selected });\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <button\n          id=\"favorite-button\"\n          class={this.getButtonClass()}\n          disabled={this.buttonDisabled}\n          onClick={this.handleClick}\n          aria-pressed={this.selected ? 'true' : 'false'}\n          aria-label={this.selected ? 'Remover dos favoritos' : 'Adicionar aos favoritos'}\n        >\n          <sula-icon\n            icon={this.getIconName()}\n            customClass={`text-2xl ${this.getIconColorClass()} ${!this.buttonDisabled && !this.selected ? 'active:text-feedback-error' : ''}`}\n            class=\"flex leading-6\"\n          ></sula-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sula-toggle/sula-toggle.stories.js

@@ -0,0 +1,189 @@
+export default {
+    title: 'Components/sula-toggle',
+    tags: ['autodocs'],
+    argTypes: {
+        selected: {
+            control: 'boolean',
+            description: 'Indica se o favorito está selecionado (coração preenchido)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        buttonDisabled: {
+            control: 'boolean',
+            description: 'Estado desabilitado do botão',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        icon: {
+            control: 'text',
+            description: 'Nome do ícone (Phosphor Icons) sem o prefixo. Exemplo: "heart", "star", "bookmark"',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'heart' },
+            },
+        },
+        toggleClicked: {
+            action: 'toggleClicked',
+            description: 'Evento emitido quando o botão de toggle é clicado',
+            table: {
+                type: { summary: 'CustomEvent<SulaToggleEvent>' },
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+O componente **Sula Toggle Favorite** é um botão de alternância para favoritar itens.
+Utiliza ícones da biblioteca Phosphor Icons, com o coração (heart) como padrão, mas podendo ser customizado.
+
+### Características principais:
+- Ícone customizável (padrão: heart)
+- Alterna entre outline (padrão) e preenchido (selecionado)
+- Área clicável de 40x40 com ícone de 24x24
+- Estados: default, hover, pressed, selected e disabled
+- Suporte a light/dark mode
+- Acessibilidade com \`aria-pressed\` e \`aria-label\`
+
+### Como usar ícones customizados:
+Informe o nome do ícone da biblioteca Phosphor Icons sem o prefixo \`ph\` ou \`ph-fill\`.
+Exemplos: "heart", "star", "bookmark", "thumbs-up", etc.
+        `,
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.alignItems = 'center';
+    container.style.justifyContent = 'center';
+    container.style.minHeight = '80px';
+    const el = document.createElement('sula-toggle');
+    el.setAttribute('selected', args.selected ? args.selected.toString() : 'false');
+    el.setAttribute('button-disabled', args.buttonDisabled ? args.buttonDisabled.toString() : 'false');
+    if (args.icon) {
+        el.setAttribute('icon', args.icon);
+    }
+    el.addEventListener('toggleClicked', args.toggleClicked);
+    container.appendChild(el);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    selected: false,
+    buttonDisabled: false,
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: 'Estado padrão do botão de favorito (coração outline, cor primária).',
+        },
+    },
+};
+export const Selected = Template.bind({});
+Selected.args = {
+    selected: true,
+    buttonDisabled: false,
+};
+Selected.parameters = {
+    docs: {
+        description: {
+            story: 'Estado selecionado/favoritado (coração preenchido, cor de erro/vermelho).',
+        },
+    },
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    selected: false,
+    buttonDisabled: true,
+};
+Disabled.parameters = {
+    docs: {
+        description: {
+            story: 'Estado desabilitado do botão de favorito.',
+        },
+    },
+};
+export const DisabledSelected = Template.bind({});
+DisabledSelected.args = {
+    selected: true,
+    buttonDisabled: true,
+};
+DisabledSelected.parameters = {
+    docs: {
+        description: {
+            story: 'Estado desabilitado com favorito previamente selecionado.',
+        },
+    },
+};
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+    selected: false,
+    buttonDisabled: false,
+    icon: 'star',
+};
+CustomIcon.parameters = {
+    docs: {
+        description: {
+            story: 'Exemplo de botão de toggle com ícone customizado (estrela). Você pode usar qualquer ícone da biblioteca Phosphor Icons informando apenas o nome sem o prefixo.',
+        },
+    },
+};
+export const CustomIconBookmark = Template.bind({});
+CustomIconBookmark.args = {
+    selected: true,
+    buttonDisabled: false,
+    icon: 'bookmark',
+};
+CustomIconBookmark.parameters = {
+    docs: {
+        description: {
+            story: 'Exemplo de botão de toggle com ícone de marcador (bookmark) selecionado.',
+        },
+    },
+};
+export const AllStates = () => {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.gap = '24px';
+    container.style.alignItems = 'center';
+    container.style.padding = '20px';
+    const states = [
+        { label: 'Default', selected: false, disabled: false },
+        { label: 'Selected', selected: true, disabled: false },
+        { label: 'Disabled', selected: false, disabled: true },
+        { label: 'Disabled + Selected', selected: true, disabled: true },
+    ];
+    states.forEach(state => {
+        const wrapper = document.createElement('div');
+        wrapper.style.display = 'flex';
+        wrapper.style.flexDirection = 'column';
+        wrapper.style.alignItems = 'center';
+        wrapper.style.gap = '8px';
+        const el = document.createElement('sula-toggle');
+        el.setAttribute('selected', state.selected.toString());
+        el.setAttribute('button-disabled', state.disabled.toString());
+        const label = document.createElement('span');
+        label.style.fontSize = '12px';
+        label.style.color = '#666';
+        label.textContent = state.label;
+        wrapper.appendChild(el);
+        wrapper.appendChild(label);
+        container.appendChild(wrapper);
+    });
+    return container;
+};
+AllStates.parameters = {
+    docs: {
+        description: {
+            story: 'Visualização de todos os estados do botão de favorito lado a lado.',
+        },
+    },
+};
+//# sourceMappingURL=sula-toggle.stories.js.map

package/dist/collection/components/sula-toggle/sula-toggle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-toggle.stories.js","sourceRoot":"","sources":["../../../src/components/sula-toggle/sula-toggle.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/sula-toggle',\n  tags: ['autodocs'],\n  argTypes: {\n    selected: {\n      control: 'boolean',\n      description: 'Indica se o favorito está selecionado (coração preenchido)',\n      table: {\n        type: { summary: 'boolean' },\n        defaultValue: { summary: 'false' },\n      },\n    },\n    buttonDisabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado do botão',\n      table: {\n        type: { summary: 'boolean' },\n        defaultValue: { summary: 'false' },\n      },\n    },\n    icon: {\n      control: 'text',\n      description: 'Nome do ícone (Phosphor Icons) sem o prefixo. Exemplo: \"heart\", \"star\", \"bookmark\"',\n      table: {\n        type: { summary: 'string' },\n        defaultValue: { summary: 'heart' },\n      },\n    },\n    toggleClicked: {\n      action: 'toggleClicked',\n      description: 'Evento emitido quando o botão de toggle é clicado',\n      table: {\n        type: { summary: 'CustomEvent<SulaToggleEvent>' },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `\nO componente **Sula Toggle Favorite** é um botão de alternância para favoritar itens.\nUtiliza ícones da biblioteca Phosphor Icons, com o coração (heart) como padrão, mas podendo ser customizado.\n\n### Características principais:\n- Ícone customizável (padrão: heart)\n- Alterna entre outline (padrão) e preenchido (selecionado)\n- Área clicável de 40x40 com ícone de 24x24\n- Estados: default, hover, pressed, selected e disabled\n- Suporte a light/dark mode\n- Acessibilidade com \\`aria-pressed\\` e \\`aria-label\\`\n\n### Como usar ícones customizados:\nInforme o nome do ícone da biblioteca Phosphor Icons sem o prefixo \\`ph\\` ou \\`ph-fill\\`.\nExemplos: \"heart\", \"star\", \"bookmark\", \"thumbs-up\", etc.\n        `,\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'flex';\n  container.style.alignItems = 'center';\n  container.style.justifyContent = 'center';\n  container.style.minHeight = '80px';\n\n  const el = document.createElement('sula-toggle');\n\n  el.setAttribute('selected', args.selected ? args.selected.toString() : 'false');\n  el.setAttribute('button-disabled', args.buttonDisabled ? args.buttonDisabled.toString() : 'false');\n  if (args.icon) {\n    el.setAttribute('icon', args.icon);\n  }\n\n  el.addEventListener('toggleClicked', args.toggleClicked);\n\n  container.appendChild(el);\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  selected: false,\n  buttonDisabled: false,\n};\nDefault.parameters = {\n  docs: {\n    description: {\n      story: 'Estado padrão do botão de favorito (coração outline, cor primária).',\n    },\n  },\n};\n\nexport const Selected = Template.bind({});\nSelected.args = {\n  selected: true,\n  buttonDisabled: false,\n};\nSelected.parameters = {\n  docs: {\n    description: {\n      story: 'Estado selecionado/favoritado (coração preenchido, cor de erro/vermelho).',\n    },\n  },\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  selected: false,\n  buttonDisabled: true,\n};\nDisabled.parameters = {\n  docs: {\n    description: {\n      story: 'Estado desabilitado do botão de favorito.',\n    },\n  },\n};\n\nexport const DisabledSelected = Template.bind({});\nDisabledSelected.args = {\n  selected: true,\n  buttonDisabled: true,\n};\nDisabledSelected.parameters = {\n  docs: {\n    description: {\n      story: 'Estado desabilitado com favorito previamente selecionado.',\n    },\n  },\n};\n\nexport const CustomIcon = Template.bind({});\nCustomIcon.args = {\n  selected: false,\n  buttonDisabled: false,\n  icon: 'star',\n};\nCustomIcon.parameters = {\n  docs: {\n    description: {\n      story: 'Exemplo de botão de toggle com ícone customizado (estrela). Você pode usar qualquer ícone da biblioteca Phosphor Icons informando apenas o nome sem o prefixo.',\n    },\n  },\n};\n\nexport const CustomIconBookmark = Template.bind({});\nCustomIconBookmark.args = {\n  selected: true,\n  buttonDisabled: false,\n  icon: 'bookmark',\n};\nCustomIconBookmark.parameters = {\n  docs: {\n    description: {\n      story: 'Exemplo de botão de toggle com ícone de marcador (bookmark) selecionado.',\n    },\n  },\n};\n\nexport const AllStates = () => {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.gap = '24px';\n  container.style.alignItems = 'center';\n  container.style.padding = '20px';\n\n  const states = [\n    { label: 'Default', selected: false, disabled: false },\n    { label: 'Selected', selected: true, disabled: false },\n    { label: 'Disabled', selected: false, disabled: true },\n    { label: 'Disabled + Selected', selected: true, disabled: true },\n  ];\n\n  states.forEach(state => {\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.flexDirection = 'column';\n    wrapper.style.alignItems = 'center';\n    wrapper.style.gap = '8px';\n\n    const el = document.createElement('sula-toggle');\n    el.setAttribute('selected', state.selected.toString());\n    el.setAttribute('button-disabled', state.disabled.toString());\n\n    const label = document.createElement('span');\n    label.style.fontSize = '12px';\n    label.style.color = '#666';\n    label.textContent = state.label;\n\n    wrapper.appendChild(el);\n    wrapper.appendChild(label);\n    container.appendChild(wrapper);\n  });\n\n  return container;\n};\nAllStates.parameters = {\n  docs: {\n    description: {\n      story: 'Visualização de todos os estados do botão de favorito lado a lado.',\n    },\n  },\n};\n"]}

package/dist/collection/components/sula-tooltip/sula-tooltip.js

@@ -99,7 +99,7 @@ export class SulaTooltip {
         const hostClass = isParentMode
             ? 'absolute inset-0 pointer-events-none overflow-visible'
             : 'inline-block relative';
-        return (h(Host, { key: '74aeac25aec31e5b246d6d437e6db3c400fd97f5', class: hostClass }, !isParentMode && (h("div", { key: '862aed7ced0ebdbf158d8810aab84324b71f2ce1', class: this.getIconClasses(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, role: "button", "aria-label": "Tooltip trigger", ref: (el) => (this.triggerEl = el) }, h("sula-icon", { key: '7d3b83eab1cb26a57df63fdb335ece4e1e9fcfee', class: "flex items-center justify-center w-full h-full leading-[0]", icon: this.icon, customClass: "text-icon-primary text-[18px] leading-none" }))), this.displayText && (h("div", { key: '33bce91901944eda226462df8c55eca44182957d', class: this.getHintClasses(), role: "tooltip", ref: (el) => (this.hintEl = el) }, this.displayText, h("div", { key: '74155b9b77fd7e9d5398abb1dec6256f7e4dfeb3', class: "tooltip-arrow", "data-popper-arrow": true, ref: (el) => (this.arrowEl = el) })))));
+        return (h(Host, { key: 'd956da097b13617092e90a00d2abb209bdcaf046', class: hostClass }, !isParentMode && (h("div", { key: '0e8265bbd03ce89dc5ab88552efc0fa2e325fb32', class: this.getIconClasses(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, role: "button", "aria-label": "Tooltip trigger", ref: (el) => (this.triggerEl = el) }, h("sula-icon", { key: '1680ed4bdba2e29f12d4a2f2c453ce66f5278157', class: "flex items-center justify-center w-full h-full leading-[0]", icon: this.icon, customClass: "text-icon-primary text-[18px] leading-none" }))), this.displayText && (h("div", { key: '97fd111befdd2eb116d09544a03c603205f67b86', class: this.getHintClasses(), role: "tooltip", ref: (el) => (this.hintEl = el) }, this.displayText, h("div", { key: '0a12d3604b4d280d37c3c6b3b27469d93c3889d4', class: "tooltip-arrow", "data-popper-arrow": true, ref: (el) => (this.arrowEl = el) })))));
     }
     static get is() { return "sula-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from './components.d.ts';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from './components.d.ts';\nexport type { SulaToggleEvent } from './components/sula-toggle/model/sula-toggle.model';\n"]}