@henriquepetrelli/hp-design-system 1.1.20 → 1.1.21

package/dist/hp-design-system.umd.js

@@ -187,7 +187,7 @@
     class: "button-secondary__icon--left"
   };
   const _hoisted_3$b = { class: "button-secondary__label" };
-  const _hoisted_4$7 = {
+  const _hoisted_4$8 = {
     key: 1,
     class: "button-secondary__icon--right"
   };
@@ -256,7 +256,7 @@
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true),
           vue.createElementVNode("span", _hoisted_3$b, vue.toDisplayString(__props.label), 1),
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$7, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$8, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
@@ -275,7 +275,7 @@
     class: "button-tertiary__icon--left"
   };
   const _hoisted_3$a = { class: "button-tertiary__label" };
-  const _hoisted_4$6 = {
+  const _hoisted_4$7 = {
     key: 1,
     class: "button-tertiary__icon--right"
   };
@@ -344,7 +344,7 @@
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true),
           vue.createElementVNode("span", _hoisted_3$a, vue.toDisplayString(__props.label), 1),
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$6, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$7, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
@@ -705,11 +705,11 @@
     key: 2,
     class: "spinner-circle-3"
   };
-  const _hoisted_4$5 = {
+  const _hoisted_4$6 = {
     key: 3,
     class: "spinner-circle-4"
   };
-  const _hoisted_5$5 = {
+  const _hoisted_5$6 = {
     key: 4,
     class: "spinner-dot-1"
   };
@@ -810,8 +810,8 @@
           __props.type === "circle1" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9)) : vue.createCommentVNode("", true),
           __props.type === "circle2" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9)) : vue.createCommentVNode("", true),
           __props.type === "circle3" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9)) : vue.createCommentVNode("", true),
-          __props.type === "circle4" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5)) : vue.createCommentVNode("", true),
-          __props.type === "dot1" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$5, [
+          __props.type === "circle4" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6)) : vue.createCommentVNode("", true),
+          __props.type === "dot1" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
             (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(3, (i) => {
               return vue.createElementVNode("div", {
                 key: `dot1-${i}`,
@@ -1159,11 +1159,11 @@
   const _hoisted_1$6 = { class: "modal__header" };
   const _hoisted_2$6 = { class: "modal__title" };
   const _hoisted_3$6 = { class: "modal__content" };
-  const _hoisted_4$4 = {
+  const _hoisted_4$5 = {
     key: 0,
     class: "modal__footer"
   };
-  const _hoisted_5$4 = {
+  const _hoisted_5$5 = {
     key: 1,
     class: "modal__footer"
   };
@@ -1268,7 +1268,7 @@
                 vue.createElementVNode("div", _hoisted_3$6, [
                   vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ]),
-                __props.hasPrimaryButton || __props.hasSecondaryButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [
+                __props.hasPrimaryButton || __props.hasSecondaryButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
                   __props.hasSecondaryButton ? (vue.openBlock(), vue.createBlock(vue.unref(HpButtonSecondary), {
                     key: 0,
                     label: __props.secondaryButtonLabel,
@@ -1282,7 +1282,7 @@
                     onClick: handleSecondaryButtonClick
                   }, null, 8, ["label", "backgroundColor"])) : vue.createCommentVNode("", true)
                 ])) : vue.createCommentVNode("", true),
-                !__props.hasPrimaryButton && !__props.hasSecondaryButton && _ctx.$slots.buttons ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
+                !__props.hasPrimaryButton && !__props.hasSecondaryButton && _ctx.$slots.buttons ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$5, [
                   vue.renderSlot(_ctx.$slots, "buttons", {}, void 0, true)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
@@ -1399,9 +1399,14 @@
 
   const ToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-14c54b46"]]);
 
-  const _hoisted_1$4 = { class: "theme-switcher-container" };
-  const _hoisted_2$4 = ["id", "aria-checked"];
-  const _hoisted_3$4 = ["for", "onKeydown"];
+  const _hoisted_1$4 = { key: 0 };
+  const _hoisted_2$4 = ["aria-checked", "onKeydown"];
+  const _hoisted_3$4 = {
+    key: 1,
+    class: "theme-switcher-animation"
+  };
+  const _hoisted_4$4 = ["id", "aria-checked"];
+  const _hoisted_5$4 = ["for", "onKeydown"];
 
 
   const _sfc_main$4 = {
@@ -1415,10 +1420,24 @@
       type: String,
       default: () => `theme-${Math.random().toString(36).substring(2, 9)}`
     },
+    hasAnimation: {
+      type: Boolean,
+      default: true
+    },
+
+    /* Toggle animado */
     lightBorderColor: String,
     lightBackgroundColor: String,
     darkBorderColor: String,
-    darkBackgroundColor: String
+    darkBackgroundColor: String,
+
+    /* Ícone */
+    lightIconColor: String,
+    darkIconColor: String,
+
+    /* Hover */
+    lightHoverBackgroundColor: String,
+    darkHoverBackgroundColor: String
   },
     emits: ['update:modelValue'],
     setup(__props, { emit: __emit }) {
@@ -1434,7 +1453,6 @@
 
   const applyTheme = (isDark) => {
     const theme = isDark ? 'dark' : 'light';
-
     document.documentElement.setAttribute('data-theme', theme);
     localStorage.setItem('theme', theme);
   };
@@ -1444,7 +1462,7 @@
     emit('update:modelValue', isDarkMode.value);
   };
 
-  const handleKeydown = () => {
+  const handleToggle = () => {
     isDarkMode.value = !isDarkMode.value;
     toggleTheme();
   };
@@ -1466,6 +1484,25 @@
     }
   );
 
+  /* 🎨 Ícone */
+  const computedButtonIcon = vue.computed(() =>
+    isDarkMode.value ? 'BE0130' : 'BE0140'
+  );
+
+  const computedButtonIconColor = vue.computed(() =>
+    isDarkMode.value
+      ? props.darkIconColor || '#f3c32e'
+      : props.lightIconColor || '#000000'
+  );
+
+  /* 🎯 Hover background */
+  const computedButtonHoverBackgroundColor = vue.computed(() =>
+    isDarkMode.value
+      ? props.darkHoverBackgroundColor || '#717171'
+      : props.lightHoverBackgroundColor || 'rgba(0, 0, 0, 0.08)'
+  );
+
+  /* 🎚 Toggle animado */
   const computedLightBorderColor = vue.computed(
     () => props.lightBorderColor || '#72cce3'
   );
@@ -1483,43 +1520,69 @@
   );
 
   return (_ctx, _cache) => {
-    return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
-      vue.withDirectives(vue.createElementVNode("input", {
-        type: "checkbox",
-        id: __props.id,
-        class: "toggle--checkbox",
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((isDarkMode).value = $event)),
-        onChange: toggleTheme,
-        role: "switch",
-        "aria-checked": isDarkMode.value,
-        "aria-label": "Alternar entre tema claro e escuro",
-        tabindex: "-1"
-      }, null, 40, _hoisted_2$4), [
-        [vue.vModelCheckbox, isDarkMode.value]
-      ]),
-      vue.createElementVNode("label", {
-        for: __props.id,
-        class: "toggle--label",
-        style: vue.normalizeStyle({
+    return (!__props.hasAnimation)
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+          vue.createElementVNode("button", {
+            class: "theme-switcher",
+            type: "button",
+            role: "switch",
+            "aria-checked": isDarkMode.value,
+            "aria-label": "Alternar entre tema claro e escuro",
+            onClick: handleToggle,
+            onKeydown: [
+              vue.withKeys(vue.withModifiers(handleToggle, ["prevent"]), ["enter"]),
+              vue.withKeys(vue.withModifiers(handleToggle, ["prevent"]), ["space"])
+            ],
+            style: vue.normalizeStyle({
+          '--hover-bg-color': computedButtonHoverBackgroundColor.value,
+          '--icon-color': computedButtonIconColor.value
+        })
+          }, [
+            vue.createVNode(vue.unref(HpIcon), {
+              class: "theme-switcher__icon",
+              name: computedButtonIcon.value,
+              size: "sm",
+              color: computedButtonIconColor.value
+            }, null, 8, ["name", "color"])
+          ], 44, _hoisted_2$4)
+        ]))
+      : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [
+          vue.withDirectives(vue.createElementVNode("input", {
+            type: "checkbox",
+            id: __props.id,
+            class: "toggle--checkbox",
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((isDarkMode).value = $event)),
+            onChange: toggleTheme,
+            role: "switch",
+            "aria-checked": isDarkMode.value,
+            "aria-label": "Alternar entre tema claro e escuro",
+            tabindex: "-1"
+          }, null, 40, _hoisted_4$4), [
+            [vue.vModelCheckbox, isDarkMode.value]
+          ]),
+          vue.createElementVNode("label", {
+            for: __props.id,
+            class: "toggle--label",
+            style: vue.normalizeStyle({
           '--light-background-color': computedLightBackgroundColor.value,
           '--light-border-color': computedLightBorderColor.value,
           '--dark-background-color': computedDarkBackgroundColor.value,
           '--dark-border-color': computedDarkBorderColor.value
         }),
-        tabindex: "0",
-        onKeydown: [
-          vue.withKeys(vue.withModifiers(handleKeydown, ["prevent"]), ["enter"]),
-          vue.withKeys(vue.withModifiers(handleKeydown, ["prevent"]), ["space"])
-        ]
-      }, _cache[1] || (_cache[1] = [
-        vue.createElementVNode("span", { class: "toggle--label-background" }, null, -1)
-      ]), 44, _hoisted_3$4)
-    ]))
+            tabindex: "0",
+            onKeydown: [
+              vue.withKeys(vue.withModifiers(handleToggle, ["prevent"]), ["enter"]),
+              vue.withKeys(vue.withModifiers(handleToggle, ["prevent"]), ["space"])
+            ]
+          }, _cache[1] || (_cache[1] = [
+            vue.createElementVNode("span", { class: "toggle--label-background" }, null, -1)
+          ]), 44, _hoisted_5$4)
+        ]))
   }
   }
 
   };
-  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-f2c78aa3"]]);
+  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-7efca676"]]);
 
   const _hoisted_1$3 = { class: "input__fieldset" };
   const _hoisted_2$3 = {