@henriquepetrelli/hp-design-system 1.1.19 → 1.1.21

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

@@ -183,7 +183,7 @@ const _hoisted_2$d = {
   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"
 };
@@ -252,7 +252,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])
         ])) : createCommentVNode("", true),
         createElementVNode("span", _hoisted_3$b, toDisplayString(__props.label), 1),
-        __props.icon && __props.iconPosition === unref(IconPosition).RIGHT ? (openBlock(), createElementBlock("span", _hoisted_4$7, [
+        __props.icon && __props.iconPosition === unref(IconPosition).RIGHT ? (openBlock(), createElementBlock("span", _hoisted_4$8, [
           createVNode(HpIcon, {
             name: __props.icon,
             size: "sm"
@@ -271,7 +271,7 @@ const _hoisted_2$c = {
   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"
 };
@@ -340,7 +340,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])
         ])) : createCommentVNode("", true),
         createElementVNode("span", _hoisted_3$a, toDisplayString(__props.label), 1),
-        __props.icon && __props.iconPosition === unref(IconPosition).RIGHT ? (openBlock(), createElementBlock("span", _hoisted_4$6, [
+        __props.icon && __props.iconPosition === unref(IconPosition).RIGHT ? (openBlock(), createElementBlock("span", _hoisted_4$7, [
           createVNode(HpIcon, {
             name: __props.icon,
             size: "sm"
@@ -701,11 +701,11 @@ const _hoisted_3$9 = {
   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"
 };
@@ -806,8 +806,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         __props.type === "circle1" ? (openBlock(), createElementBlock("div", _hoisted_1$9)) : createCommentVNode("", true),
         __props.type === "circle2" ? (openBlock(), createElementBlock("div", _hoisted_2$9)) : createCommentVNode("", true),
         __props.type === "circle3" ? (openBlock(), createElementBlock("div", _hoisted_3$9)) : createCommentVNode("", true),
-        __props.type === "circle4" ? (openBlock(), createElementBlock("div", _hoisted_4$5)) : createCommentVNode("", true),
-        __props.type === "dot1" ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
+        __props.type === "circle4" ? (openBlock(), createElementBlock("div", _hoisted_4$6)) : createCommentVNode("", true),
+        __props.type === "dot1" ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
           (openBlock(), createElementBlock(Fragment, null, renderList(3, (i) => {
             return createElementVNode("div", {
               key: `dot1-${i}`,
@@ -1155,11 +1155,11 @@ const Heading = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-
 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"
 };
@@ -1264,7 +1264,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_3$6, [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ]),
-              __props.hasPrimaryButton || __props.hasSecondaryButton ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
+              __props.hasPrimaryButton || __props.hasSecondaryButton ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
                 __props.hasSecondaryButton ? (openBlock(), createBlock(unref(HpButtonSecondary), {
                   key: 0,
                   label: __props.secondaryButtonLabel,
@@ -1278,7 +1278,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   onClick: handleSecondaryButtonClick
                 }, null, 8, ["label", "backgroundColor"])) : createCommentVNode("", true)
               ])) : createCommentVNode("", true),
-              !__props.hasPrimaryButton && !__props.hasSecondaryButton && _ctx.$slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+              !__props.hasPrimaryButton && !__props.hasSecondaryButton && _ctx.$slots.buttons ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
                 renderSlot(_ctx.$slots, "buttons", {}, void 0, true)
               ])) : createCommentVNode("", true)
             ], 2)
@@ -1395,9 +1395,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 
 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 = {
@@ -1411,10 +1416,24 @@ const _sfc_main$4 = {
     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 }) {
@@ -1423,18 +1442,15 @@ const props = __props;
 
 const emit = __emit;
 
-const getStoredTheme = () => localStorage.getItem('theme');
+const getStoredTheme = () => localStorage.getItem('theme') || 'light';
 const isStoredDark = () => getStoredTheme() === 'dark';
 
 const isDarkMode = ref(isStoredDark());
 
 const applyTheme = (isDark) => {
-  const root = document.documentElement;
-
-  root.classList.toggle('dark', isDark);
-  root.classList.remove('light'); // light é o default via :root
-
-  localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  const theme = isDark ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem('theme', theme);
 };
 
 const toggleTheme = () => {
@@ -1442,7 +1458,7 @@ const toggleTheme = () => {
   emit('update:modelValue', isDarkMode.value);
 };
 
-const handleKeydown = () => {
+const handleToggle = () => {
   isDarkMode.value = !isDarkMode.value;
   toggleTheme();
 };
@@ -1464,6 +1480,25 @@ watch(
   }
 );
 
+/* 🎨 Ícone */
+const computedButtonIcon = computed(() =>
+  isDarkMode.value ? 'BE0130' : 'BE0140'
+);
+
+const computedButtonIconColor = computed(() =>
+  isDarkMode.value
+    ? props.darkIconColor || '#f3c32e'
+    : props.lightIconColor || '#000000'
+);
+
+/* 🎯 Hover background */
+const computedButtonHoverBackgroundColor = computed(() =>
+  isDarkMode.value
+    ? props.darkHoverBackgroundColor || '#717171'
+    : props.lightHoverBackgroundColor || 'rgba(0, 0, 0, 0.08)'
+);
+
+/* 🎚 Toggle animado */
 const computedLightBorderColor = computed(
   () => props.lightBorderColor || '#72cce3'
 );
@@ -1481,43 +1516,69 @@ const computedDarkBackgroundColor = computed(
 );
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$4, [
-    withDirectives(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), [
-      [vModelCheckbox, isDarkMode.value]
-    ]),
-    createElementVNode("label", {
-      for: __props.id,
-      class: "toggle--label",
-      style: normalizeStyle({
+  return (!__props.hasAnimation)
+    ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createElementVNode("button", {
+          class: "theme-switcher",
+          type: "button",
+          role: "switch",
+          "aria-checked": isDarkMode.value,
+          "aria-label": "Alternar entre tema claro e escuro",
+          onClick: handleToggle,
+          onKeydown: [
+            withKeys(withModifiers(handleToggle, ["prevent"]), ["enter"]),
+            withKeys(withModifiers(handleToggle, ["prevent"]), ["space"])
+          ],
+          style: normalizeStyle({
+        '--hover-bg-color': computedButtonHoverBackgroundColor.value,
+        '--icon-color': computedButtonIconColor.value
+      })
+        }, [
+          createVNode(unref(HpIcon), {
+            class: "theme-switcher__icon",
+            name: computedButtonIcon.value,
+            size: "sm",
+            color: computedButtonIconColor.value
+          }, null, 8, ["name", "color"])
+        ], 44, _hoisted_2$4)
+      ]))
+    : (openBlock(), createElementBlock("div", _hoisted_3$4, [
+        withDirectives(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), [
+          [vModelCheckbox, isDarkMode.value]
+        ]),
+        createElementVNode("label", {
+          for: __props.id,
+          class: "toggle--label",
+          style: normalizeStyle({
         '--light-background-color': computedLightBackgroundColor.value,
         '--light-border-color': computedLightBorderColor.value,
         '--dark-background-color': computedDarkBackgroundColor.value,
         '--dark-border-color': computedDarkBorderColor.value
       }),
-      tabindex: "0",
-      onKeydown: [
-        withKeys(withModifiers(handleKeydown, ["prevent"]), ["enter"]),
-        withKeys(withModifiers(handleKeydown, ["prevent"]), ["space"])
-      ]
-    }, _cache[1] || (_cache[1] = [
-      createElementVNode("span", { class: "toggle--label-background" }, null, -1)
-    ]), 44, _hoisted_3$4)
-  ]))
+          tabindex: "0",
+          onKeydown: [
+            withKeys(withModifiers(handleToggle, ["prevent"]), ["enter"]),
+            withKeys(withModifiers(handleToggle, ["prevent"]), ["space"])
+          ]
+        }, _cache[1] || (_cache[1] = [
+          createElementVNode("span", { class: "toggle--label-background" }, null, -1)
+        ]), 44, _hoisted_5$4)
+      ]))
 }
 }
 
 };
-const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-ed2b100c"]]);
+const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-7efca676"]]);
 
 const _hoisted_1$3 = { class: "input__fieldset" };
 const _hoisted_2$3 = {