@grupo-elo-editorial/shared-ui-react 1.4.5 → 1.4.8

package/CHANGELOG.md

@@ -4,6 +4,24 @@ Format: [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) · Versioning:
 
 ---
 
+## [1.4.8] — 2026-06-23 (TopAccessibilityBar — VLibras não inicializa em lazy load; ELO-613)
+
+### Fixed
+
+- **`TopAccessibilityBar`**: corrigida inicialização do VLibras quando carregado lazily. O `VLibras.Widget()` registra `window.onload` para executar sua inicialização real (injetar ícone, registrar listeners). Como o script é carregado ao clicar — com a página já carregada — `window.onload` nunca disparava, deixando o widget sem ícone e sem estilos. Agora, após `new VLibras.Widget()`, o handler `window.onload` é invocado manualmente, garantindo que o botão flutuante apareça corretamente.
+- `package.json` `version` bumped `1.4.7 → 1.4.8`.
+
+---
+
+## [1.4.7] — 2026-06-22 (TopAccessibilityBar — VLibras reexibe após esconder; ELO-607)
+
+### Fixed
+
+- **`TopAccessibilityBar`**: corrigido o toggle do VLibras. Esconder o widget usava `display:none` no container `[vw]`, que descarta o contexto Unity WebGL do avatar e impedia o reaparecimento ao reativar (só voltava recarregando a página). Agora usa `visibility` + `opacity` + `pointer-events`, mantendo o canvas Unity na árvore de layout — o avatar volta a aparecer ao reativar, sem reload. Combina com o fix de CSP do site (ELO-603) que destravou o carregamento inicial do widget.
+- `package.json` `version` bumped `1.4.6 → 1.4.7`.
+
+---
+
 ## [1.4.5] — 2026-06-11 (Footer — capitalização sentence case na barra legal; ELO-414)
 
 ### Fixed

package/dist/index.js

@@ -2,15 +2,15 @@
 import { clsx as ae } from "clsx";
 import { twMerge as re } from "tailwind-merge";
 import { jsx as e, jsxs as o, Fragment as P } from "react/jsx-runtime";
-import { forwardRef as w, useState as C, useRef as ie, useEffect as L } from "react";
-import { Loader2 as U, User as oe, Star as ne, CheckIcon as X, ChevronDownIcon as T, ChevronUpIcon as se, CircleIcon as le, ShoppingCart as $, Heart as de, Search as Y, X as ce, Minus as ue, Plus as me, ChevronRight as K, FileX as fe, Package as ge, AlertCircle as pe, RefreshCw as ve, Home as be, XIcon as O, Accessibility as he, ZoomOut as xe, ZoomIn as Ne, Moon as ye, Sun as we, ChevronLeft as ke, Menu as ze, ChevronDown as Z, Instagram as Ce, Facebook as Se, Youtube as je, Linkedin as De, Mail as Me } from "lucide-react";
-import { cva as B } from "class-variance-authority";
+import { forwardRef as y, useState as C, useRef as ie, useEffect as L } from "react";
+import { Loader2 as U, User as oe, Star as ne, CheckIcon as X, ChevronDownIcon as T, ChevronUpIcon as se, CircleIcon as le, ShoppingCart as $, Heart as de, Search as Y, X as ce, Minus as ue, Plus as me, ChevronRight as K, FileX as fe, Package as ge, AlertCircle as pe, RefreshCw as ve, Home as be, XIcon as O, Accessibility as he, ZoomOut as xe, ZoomIn as Ne, Moon as we, Sun as ye, ChevronLeft as ke, Menu as ze, ChevronDown as Z, Instagram as Ce, Facebook as Se, Youtube as je, Linkedin as De, Mail as Me } from "lucide-react";
+import { cva as _ } from "class-variance-authority";
 import * as S from "@radix-ui/react-select";
 import * as G from "@radix-ui/react-checkbox";
 import * as V from "@radix-ui/react-radio-group";
 import * as H from "@radix-ui/react-switch";
 import { Slot as Ae } from "@radix-ui/react-slot";
-import * as _ from "@radix-ui/react-accordion";
+import * as E from "@radix-ui/react-accordion";
 import * as A from "@radix-ui/react-tooltip";
 import { toast as ma } from "sonner";
 import { Progress as ga } from "@radix-ui/react-progress";
@@ -19,7 +19,7 @@ import * as M from "@radix-ui/react-navigation-menu";
 function i(...a) {
   return re(ae(a));
 }
-const Pe = B(
+const Pe = _(
   "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 whitespace-nowrap",
   {
     variants: {
@@ -45,7 +45,7 @@ const Pe = B(
       size: "md"
     }
   }
-), j = w(
+), j = y(
   ({
     className: a,
     variant: t,
@@ -76,7 +76,7 @@ const Pe = B(
   )
 );
 j.displayName = "Button";
-const _e = w(
+const Ee = y(
   ({ className: a, error: t, helperText: r, ...s }, l) => /* @__PURE__ */ o("div", { className: "w-full", children: [
     /* @__PURE__ */ e(
       "textarea",
@@ -106,8 +106,8 @@ const _e = w(
     )
   ] })
 );
-_e.displayName = "Textarea";
-const Be = B(
+Ee.displayName = "Textarea";
+const _e = _(
   "inline-flex items-center rounded-full font-medium transition-colors whitespace-nowrap",
   {
     variants: {
@@ -131,12 +131,12 @@ const Be = B(
       size: "md"
     }
   }
-), R = w(
+), R = y(
   ({ className: a, variant: t, size: r, icon: s, onRemove: l, children: n, ...d }, c) => /* @__PURE__ */ o(
     "div",
     {
       ref: c,
-      className: i(Be({ variant: t, size: r }), a),
+      className: i(_e({ variant: t, size: r }), a),
       ...d,
       children: [
         s && /* @__PURE__ */ e("span", { className: "mr-1 inline-flex", children: s }),
@@ -155,7 +155,7 @@ const Be = B(
   )
 );
 R.displayName = "Badge";
-const Ee = B(
+const Be = _(
   "relative inline-flex items-center justify-center overflow-hidden rounded-full bg-[var(--muted)] text-[var(--muted-foreground)] flex-shrink-0",
   {
     variants: {
@@ -170,7 +170,7 @@ const Ee = B(
       size: "md"
     }
   }
-), Le = w(
+), Le = y(
   ({ className: a, size: t, src: r, alt: s, name: l, showStatus: n, statusType: d = "online", ...c }, m) => {
     const [f, v] = C(!1), p = (N) => N.split(" ").map((u) => u[0]).join("").toUpperCase().slice(0, 2), h = {
       online: "bg-[var(--success)]",
@@ -183,7 +183,7 @@ const Ee = B(
       lg: "h-3 w-3 border-2",
       xl: "h-4 w-4 border-2"
     };
-    return /* @__PURE__ */ o("div", { ref: m, className: i(Ee({ size: t }), "relative", a), children: [
+    return /* @__PURE__ */ o("div", { ref: m, className: i(Be({ size: t }), "relative", a), children: [
       r && !f ? /* @__PURE__ */ e(
         "img",
         {
@@ -209,7 +209,7 @@ const Ee = B(
   }
 );
 Le.displayName = "Avatar";
-const Re = B("animate-spin text-[var(--brand-primary)]", {
+const Re = _("animate-spin text-[var(--brand-primary)]", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -221,7 +221,7 @@ const Re = B("animate-spin text-[var(--brand-primary)]", {
   defaultVariants: {
     size: "md"
   }
-}), Te = w(
+}), Te = y(
   ({ className: a, size: t, label: r, ...s }, l) => /* @__PURE__ */ o(
     "div",
     {
@@ -238,7 +238,7 @@ const Re = B("animate-spin text-[var(--brand-primary)]", {
   )
 );
 Te.displayName = "Spinner";
-const $e = w(
+const $e = y(
   ({ className: a, orientation: t = "horizontal", variant: r = "solid", text: s, ...l }, n) => {
     const d = {
       solid: "border-solid",
@@ -285,7 +285,7 @@ const $e = w(
   }
 );
 $e.displayName = "Divider";
-const F = w(
+const F = y(
   ({
     className: a,
     value: t = 0,
@@ -369,12 +369,12 @@ function Pt({
 }) {
   return /* @__PURE__ */ e(S.Root, { "data-slot": "select", ...a });
 }
-function _t({
+function Et({
   ...a
 }) {
   return /* @__PURE__ */ e(S.Value, { "data-slot": "select-value", ...a });
 }
-function Bt({
+function _t({
   className: a,
   size: t = "default",
   children: r,
@@ -397,7 +397,7 @@ function Bt({
     }
   );
 }
-function Et({
+function Bt({
   className: a,
   children: t,
   position: r = "popper",
@@ -583,7 +583,7 @@ function Q({
 }) {
   return a ? /* @__PURE__ */ e("a", { href: a, className: t, tabIndex: -1, "aria-hidden": "true", children: r }) : /* @__PURE__ */ e("div", { className: t, children: r });
 }
-const I = w(
+const I = y(
   ({
     className: a,
     image: t,
@@ -603,7 +603,7 @@ const I = w(
     href: u,
     orientation: b = "vertical",
     renderImage: g = Ie,
-    ...y
+    ...w
   }, D) => v ? /* @__PURE__ */ o(
     "div",
     {
@@ -613,7 +613,7 @@ const I = w(
         b === "horizontal" ? "flex-row gap-3" : "flex-col",
         a
       ),
-      ...y,
+      ...w,
       children: [
         /* @__PURE__ */ e(
           "div",
@@ -640,7 +640,7 @@ const I = w(
         p && "opacity-60",
         a
       ),
-      ...y,
+      ...w,
       children: [
         /* @__PURE__ */ e(
           Q,
@@ -707,7 +707,7 @@ const I = w(
         p && "opacity-60",
         a
       ),
-      ...y,
+      ...w,
       children: [
         /* @__PURE__ */ o(
           Q,
@@ -794,7 +794,7 @@ const I = w(
   )
 );
 I.displayName = "ProductCard";
-const qe = w(
+const qe = y(
   ({
     className: a,
     onSearch: t,
@@ -811,8 +811,8 @@ const qe = w(
       md: "h-11 text-base",
       lg: "h-14 text-lg"
     }, N = (g) => {
-      const y = g.target.value;
-      d === void 0 && p(y), c == null || c(g);
+      const w = g.target.value;
+      d === void 0 && p(w), c == null || c(g);
     }, u = () => {
       d === void 0 && p(""), r == null || r();
     }, b = (g) => {
@@ -856,7 +856,7 @@ const qe = w(
   }
 );
 qe.displayName = "SearchBar";
-const Ue = w(
+const Ue = y(
   ({
     className: a,
     price: t,
@@ -920,7 +920,7 @@ const Ue = w(
   }
 );
 Ue.displayName = "PriceDisplay";
-const Ge = w(
+const Ge = y(
   ({
     className: a,
     value: t,
@@ -1001,7 +1001,7 @@ const Ge = w(
   }
 );
 Ge.displayName = "QuantitySelector";
-const He = w(
+const He = y(
   ({ className: a, label: t, htmlFor: r, required: s, error: l, helperText: n, children: d, ...c }, m) => /* @__PURE__ */ o("div", { ref: m, className: i("flex flex-col gap-1.5", a), ...c, children: [
     t && /* @__PURE__ */ o(
       "label",
@@ -1101,14 +1101,14 @@ function Ht({
 function Qt({
   ...a
 }) {
-  return /* @__PURE__ */ e(_.Root, { "data-slot": "accordion", ...a });
+  return /* @__PURE__ */ e(E.Root, { "data-slot": "accordion", ...a });
 }
 function Wt({
   className: a,
   ...t
 }) {
   return /* @__PURE__ */ e(
-    _.Item,
+    E.Item,
     {
       "data-slot": "accordion-item",
       className: i("border-b last:border-b-0", a),
@@ -1121,8 +1121,8 @@ function Xt({
   children: t,
   ...r
 }) {
-  return /* @__PURE__ */ e(_.Header, { className: "flex", children: /* @__PURE__ */ o(
-    _.Trigger,
+  return /* @__PURE__ */ e(E.Header, { className: "flex", children: /* @__PURE__ */ o(
+    E.Trigger,
     {
       "data-slot": "accordion-trigger",
       className: i(
@@ -1143,7 +1143,7 @@ function Yt({
   ...r
 }) {
   return /* @__PURE__ */ e(
-    _.Content,
+    E.Content,
     {
       "data-slot": "accordion-content",
       className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
@@ -1198,7 +1198,7 @@ function Zt({
     }
   ) });
 }
-const We = w(
+const We = y(
   ({
     className: a,
     variant: t = "default",
@@ -1306,7 +1306,7 @@ const We = w(
   )
 );
 We.displayName = "Hero";
-const J = w(
+const J = y(
   ({
     className: a,
     variant: t = "default",
@@ -1351,7 +1351,7 @@ const J = w(
   }
 );
 J.displayName = "EmptyState";
-const Xe = w(
+const Xe = y(
   ({
     className: a,
     type: t = "generic",
@@ -1431,7 +1431,7 @@ const Xe = w(
   }
 );
 Xe.displayName = "ErrorState";
-const Ye = w(
+const Ye = y(
   ({
     className: a,
     products: t,
@@ -1727,26 +1727,26 @@ function nt({ children: a, as: t = "div", className: r }) {
     }
   );
 }
-const st = w(
+const st = y(
   ({ className: a, onThemeChange: t, onFontSizeChange: r, showA11yLink: s = !1, ...l }, n) => {
     const [d, c] = C("light"), [m, f] = C(16), [v, p] = C(!1), h = ie(!1);
     L(() => {
-      const y = localStorage.getItem("a11y-theme") ?? document.documentElement.getAttribute("data-theme") ?? "light";
-      c(y);
+      const w = localStorage.getItem("a11y-theme") ?? document.documentElement.getAttribute("data-theme") ?? "light";
+      c(w);
       const D = Number(localStorage.getItem("a11y-font-size"));
       Number.isFinite(D) && D > 0 && f(D);
     }, []);
     const x = () => {
       if (h.current) {
-        const g = document.querySelector("[vw]"), y = !v;
-        g && (g.style.display = y ? "" : "none"), p(y);
+        const g = document.querySelector("[vw]"), w = !v;
+        g && (g.style.visibility = w ? "" : "hidden", g.style.opacity = w ? "" : "0", g.style.pointerEvents = w ? "" : "none"), p(w);
       } else {
         const g = document.createElement("div");
         g.setAttribute("vw", ""), g.className = "enabled", g.innerHTML = '<div vw-access-button class="active"></div><div vw-plugin-wrapper><div class="vw-plugin-top-wrapper"></div></div>', document.body.appendChild(g);
-        const y = document.createElement("script");
-        y.src = "https://vlibras.gov.br/app/vlibras-plugin.js", y.async = !0, y.onload = () => {
-          window.VLibras && new window.VLibras.Widget("https://vlibras.gov.br/app"), h.current = !0, p(!0);
-        }, document.body.appendChild(y);
+        const w = document.createElement("script");
+        w.src = "https://vlibras.gov.br/app/vlibras-plugin.js", w.async = !0, w.onload = () => {
+          window.VLibras && (new window.VLibras.Widget("https://vlibras.gov.br/app"), typeof window.onload == "function" && window.onload(new Event("load"))), h.current = !0, p(!0);
+        }, document.body.appendChild(w);
       }
     }, N = () => {
       const g = d === "light" ? "dark" : "light";
@@ -1826,7 +1826,7 @@ const st = w(
                   "p-2 rounded-md transition-colors text-[var(--muted-foreground)] hover:bg-[var(--muted)]",
                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
                 ),
-                children: d === "light" ? /* @__PURE__ */ e(ye, { className: "h-4 w-4" }) : /* @__PURE__ */ e(we, { className: "h-4 w-4" })
+                children: d === "light" ? /* @__PURE__ */ e(we, { className: "h-4 w-4" }) : /* @__PURE__ */ e(ye, { className: "h-4 w-4" })
               }
             ),
             /* @__PURE__ */ e(
@@ -1855,7 +1855,7 @@ const st = w(
   }
 );
 st.displayName = "TopAccessibilityBar";
-const lt = w(
+const lt = y(
   ({
     className: a,
     slides: t,
@@ -2044,7 +2044,7 @@ function W({
     }
   );
 }
-const ut = B(
+const ut = _(
   "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function mt({
@@ -2211,7 +2211,7 @@ function ee({ item: a, depth: t = 0 }) {
     )
   ] });
 }
-const vt = w(
+const vt = y(
   ({ items: a, logo: t, rightSlot: r, searchSlot: s, drawerFooter: l, className: n, ...d }, c) => /* @__PURE__ */ e(
     "header",
     {
@@ -2398,20 +2398,20 @@ function Nt({ title: a, links: t }) {
     )
   ] });
 }
-const yt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, newsletterSlot: r, playStoreUrl: s, appStoreUrl: l, orgInfo: n, navColumns: d, className: c, ...m }) => {
+const wt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, newsletterSlot: r, playStoreUrl: s, appStoreUrl: l, orgInfo: n, navColumns: d, className: c, ...m }) => {
   const [f, v] = C("light");
   L(() => {
     const z = document.documentElement;
     v(z.getAttribute("data-theme") ?? "light");
-    const E = new MutationObserver(() => {
+    const B = new MutationObserver(() => {
       v(z.getAttribute("data-theme") ?? "light");
     });
-    return E.observe(z, { attributes: !0, attributeFilter: ["data-theme"] }), () => E.disconnect();
+    return B.observe(z, { attributes: !0, attributeFilter: ["data-theme"] }), () => B.disconnect();
   }, []);
   const p = a === "perabook" ? f === "dark" ? "/logos/logo_PeraBook_institucional_tarja_branca.png" : "/logos/PeraBook_instituicional.png" : f === "dark" ? "/logos/logo_elo_editora_texto_branco.png" : "/logos/logo_elo_institucional.png", h = a === "perabook" ? "PeraBook" : "Elo Editora", x = bt.map((z) => ({
     ...z,
     href: (n == null ? void 0 : n[z.key]) ?? z.href
-  })).filter((z) => z.href), N = (n == null ? void 0 : n.email) ?? "contato@grupoeloediorial.com.br", u = (n == null ? void 0 : n.phone) ?? "(11) 3000-0000", b = n == null ? void 0 : n.fullAddress, g = f === "dark" && (n == null ? void 0 : n.googlePlayBadgeUrlDark) || (n == null ? void 0 : n.googlePlayBadgeUrl) || "", y = f === "dark" && (n == null ? void 0 : n.appStoreBadgeUrlDark) || (n == null ? void 0 : n.appStoreBadgeUrl) || "", D = !!(g || y);
+  })).filter((z) => z.href), N = (n == null ? void 0 : n.email) ?? "contato@grupoeloediorial.com.br", u = (n == null ? void 0 : n.phone) ?? "(11) 3000-0000", b = n == null ? void 0 : n.fullAddress, g = f === "dark" && (n == null ? void 0 : n.googlePlayBadgeUrlDark) || (n == null ? void 0 : n.googlePlayBadgeUrl) || "", w = f === "dark" && (n == null ? void 0 : n.appStoreBadgeUrlDark) || (n == null ? void 0 : n.appStoreBadgeUrl) || "", D = !!(g || w);
   return /* @__PURE__ */ o(
     "footer",
     {
@@ -2428,9 +2428,9 @@ const yt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, newsletterSlot: r
                 {
                   src: p,
                   alt: h,
-                  width: 160,
-                  height: 53,
-                  className: "h-14 w-auto object-contain"
+                  width: 290,
+                  height: 96,
+                  className: "h-16 lg:h-24 w-auto object-contain"
                 }
               ),
               /* @__PURE__ */ o("div", { className: "mt-6 space-y-1 text-sm", children: [
@@ -2467,7 +2467,7 @@ const yt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, newsletterSlot: r
                       )
                     }
                   ),
-                  y && /* @__PURE__ */ e(
+                  w && /* @__PURE__ */ e(
                     "a",
                     {
                       href: l ?? "#",
@@ -2478,23 +2478,23 @@ const yt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, newsletterSlot: r
                       children: /* @__PURE__ */ e(
                         "img",
                         {
-                          src: y,
+                          src: w,
                           alt: "Disponível na App Store",
                           width: 135,
                           height: 40,
                           className: "h-10 w-[135px] object-contain"
                         },
-                        y
+                        w
                       )
                     }
                   )
                 ] })
               ] }),
               /* @__PURE__ */ e("p", { className: "mt-6 text-sm font-semibold uppercase tracking-wide text-[var(--foreground)]", children: "Compartilhe" }),
-              /* @__PURE__ */ e("div", { className: "mt-3 flex flex-wrap gap-2", "aria-label": "Compartilhe nas redes sociais", children: x.map(({ label: z, href: E, Icon: te }) => /* @__PURE__ */ e(
+              /* @__PURE__ */ e("div", { className: "mt-3 flex flex-wrap gap-2", "aria-label": "Compartilhe nas redes sociais", children: x.map(({ label: z, href: B, Icon: te }) => /* @__PURE__ */ e(
                 "a",
                 {
-                  href: E,
+                  href: B,
                   target: "_blank",
                   rel: "noopener noreferrer",
                   "aria-label": z,
@@ -2522,7 +2522,7 @@ const yt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, newsletterSlot: r
     }
   );
 };
-yt.displayName = "Footer";
+wt.displayName = "Footer";
 function la({ children: a, className: t }) {
   return /* @__PURE__ */ e(
     "div",
@@ -2536,7 +2536,7 @@ function la({ children: a, className: t }) {
     }
   );
 }
-const wt = {
+const yt = {
   1: "col-span-1",
   2: "col-span-2",
   3: "col-span-3",
@@ -2545,7 +2545,7 @@ const wt = {
   6: "col-span-6"
 };
 function da({ children: a, span: t, className: r }) {
-  return /* @__PURE__ */ e("div", { "data-slot": "col", className: i("min-w-0", t && wt[t], r), children: a });
+  return /* @__PURE__ */ e("div", { "data-slot": "col", className: i("min-w-0", t && yt[t], r), children: a });
 }
 export {
   Qt as Accordion,
@@ -2574,7 +2574,7 @@ export {
   Ze as Drawer,
   J as EmptyState,
   Xe as ErrorState,
-  yt as Footer,
+  wt as Footer,
   He as FormGroup,
   la as Grid,
   We as Hero,
@@ -2592,10 +2592,10 @@ export {
   F as Rating,
   qe as SearchBar,
   Pt as Select,
-  Et as SelectContent,
+  Bt as SelectContent,
   Lt as SelectItem,
-  Bt as SelectTrigger,
-  _t as SelectValue,
+  _t as SelectTrigger,
+  Et as SelectValue,
   rt as SheetContent,
   sa as SheetDescription,
   na as SheetFooter,
@@ -2603,15 +2603,15 @@ export {
   ot as SheetTitle,
   Je as SheetTrigger,
   Te as Spinner,
-  _e as Textarea,
+  Ee as Textarea,
   Vt as Toggle,
   Kt as Tooltip,
   Zt as TooltipContent,
   Qe as TooltipProvider,
   Ot as TooltipTrigger,
   st as TopAccessibilityBar,
-  Ee as avatarVariants,
-  Be as badgeVariants,
+  Be as avatarVariants,
+  _e as badgeVariants,
   Pe as buttonVariants,
   i as cn,
   Re as spinnerVariants,