@grupo-elo-editorial/shared-ui-react 1.2.6 → 1.2.8

package/CHANGELOG.md

@@ -4,6 +4,26 @@ Format: [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) · Versioning:
 
 ---
 
+## [1.2.8] — 2026-05-26 (HeroCarousel — mobile aspect ratio 3:2)
+
+### Changed
+
+- **`HeroCarousel`**: mobile aspect ratio updated from `5:6` (portrait, ~497px on iPhone XR) to `3:2` (~276px on iPhone XR = 31% of 896px viewport). The previous ratio made the hero occupy 55% of the screen on common phones, which was disproportionate. Tablet (`16:9`) and desktop (`1920:700`) ratios unchanged. Image spec updated: mobile banners should now be **750 × 500 px** (3:2) instead of 750 × 900 px.
+
+- `package.json` `version` bumped `1.2.7 → 1.2.8`.
+
+---
+
+## [1.2.7] — 2026-05-26 (TopAccessibilityBar — container via design-tokens)
+
+### Changed
+
+- **`TopAccessibilityBar`**: inner content wrapper migrated from hardcoded `max-w-7xl` (1280px) to the `<Container>` layout primitive from `../layout/Container`. The component now reads `var(--container-max)` at runtime, so any consuming app that overrides `--container-max` in its global CSS automatically gets the correct max-width on the accessibility bar — no prop needed. Backward-compatible: apps that don't override `--container-max` continue to render at the design-tokens default (1280px).
+
+- `package.json` `version` bumped `1.2.6 → 1.2.7`.
+
+---
+
 ## [1.2.3] — 2026-05-25 (HeroCarousel — overlay de texto configurável por slide)
 
 ### Added

package/dist/index.js

@@ -348,7 +348,7 @@ const $ = N(
   }
 );
 $.displayName = "Rating";
-function kt({ className: a, type: t, ...r }) {
+function zt({ className: a, type: t, ...r }) {
   return /* @__PURE__ */ e(
     "input",
     {
@@ -364,17 +364,17 @@ function kt({ className: a, type: t, ...r }) {
     }
   );
 }
-function zt({
+function Ct({
   ...a
 }) {
   return /* @__PURE__ */ e(z.Root, { "data-slot": "select", ...a });
 }
-function Ct({
+function St({
   ...a
 }) {
   return /* @__PURE__ */ e(z.Value, { "data-slot": "select-value", ...a });
 }
-function St({
+function It({
   className: a,
   size: t = "default",
   children: r,
@@ -397,7 +397,7 @@ function St({
     }
   );
 }
-function It({
+function jt({
   className: a,
   children: t,
   position: r = "popper",
@@ -431,7 +431,7 @@ function It({
     }
   ) });
 }
-function jt({
+function Mt({
   className: a,
   children: t,
   ...r
@@ -486,7 +486,7 @@ function Re({
     }
   );
 }
-function Mt({
+function Dt({
   className: a,
   ...t
 }) {
@@ -510,7 +510,7 @@ function Mt({
     }
   );
 }
-function Dt({
+function Lt({
   className: a,
   ...t
 }) {
@@ -523,7 +523,7 @@ function Dt({
     }
   );
 }
-function Lt({
+function _t({
   className: a,
   ...t
 }) {
@@ -547,7 +547,7 @@ function Lt({
     }
   );
 }
-function _t({
+function Pt({
   className: a,
   ...t
 }) {
@@ -615,7 +615,7 @@ const T = N(
           {
             className: o(
               "rounded-lg bg-[var(--muted)]",
-              p === "horizontal" ? "h-24 w-20 shrink-0" : "w-full aspect-2/3"
+              p === "horizontal" ? "h-24 w-20 shrink-0" : "h-56 sm:h-60 lg:h-64 w-full"
             )
           }
         ),
@@ -711,7 +711,7 @@ const T = N(
           H,
           {
             href: d,
-            className: "relative block w-full aspect-2/3 overflow-hidden rounded-t-lg",
+            className: "relative block h-56 sm:h-60 lg:h-64 w-full overflow-hidden rounded-t-lg",
             children: [
               /* @__PURE__ */ e(
                 "div",
@@ -730,7 +730,7 @@ const T = N(
                 {
                   src: t,
                   alt: r,
-                  className: "relative z-10 h-full w-full object-contain transition-transform group-hover:scale-105"
+                  className: "relative z-10 h-full w-full object-cover transition-transform group-hover:scale-105"
                 }
               ),
               f && /* @__PURE__ */ e("div", { className: "absolute left-3 top-3 z-20", children: /* @__PURE__ */ e(P, { variant: u, children: f }) }),
@@ -1041,10 +1041,10 @@ const Be = N(
   ] })
 );
 Be.displayName = "FormGroup";
-function Pt({ ...a }) {
+function At({ ...a }) {
   return /* @__PURE__ */ e("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...a });
 }
-function At({ className: a, ...t }) {
+function Rt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "ol",
     {
@@ -1057,7 +1057,7 @@ function At({ className: a, ...t }) {
     }
   );
 }
-function Rt({ className: a, ...t }) {
+function Et({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "li",
     {
@@ -1067,7 +1067,7 @@ function Rt({ className: a, ...t }) {
     }
   );
 }
-function Et({
+function $t({
   asChild: a,
   className: t,
   ...r
@@ -1081,7 +1081,7 @@ function Et({
     }
   );
 }
-function $t({ className: a, ...t }) {
+function Tt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "span",
     {
@@ -1094,7 +1094,7 @@ function $t({ className: a, ...t }) {
     }
   );
 }
-function Tt({
+function Bt({
   children: a,
   className: t,
   ...r
@@ -1111,12 +1111,12 @@ function Tt({
     }
   );
 }
-function Bt({
+function Vt({
   ...a
 }) {
   return /* @__PURE__ */ e(D.Root, { "data-slot": "accordion", ...a });
 }
-function Vt({
+function Ft({
   className: a,
   ...t
 }) {
@@ -1129,7 +1129,7 @@ function Vt({
     }
   );
 }
-function Ft({
+function qt({
   className: a,
   children: t,
   ...r
@@ -1150,7 +1150,7 @@ function Ft({
     }
   ) });
 }
-function qt({
+function Ht({
   className: a,
   children: t,
   ...r
@@ -1178,17 +1178,17 @@ function Ve({
     }
   );
 }
-function Ht({
+function Gt({
   ...a
 }) {
   return /* @__PURE__ */ e(Ve, { children: /* @__PURE__ */ e(I.Root, { "data-slot": "tooltip", ...a }) });
 }
-function Gt({
+function Ut({
   ...a
 }) {
   return /* @__PURE__ */ e(I.Trigger, { "data-slot": "tooltip-trigger", ...a });
 }
-function Ut({
+function Qt({
   className: a,
   sideOffset: t = 0,
   children: r,
@@ -1458,8 +1458,8 @@ const He = N(
   }, u) => {
     const v = {
       2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+      3: "grid-cols-2 sm:grid-cols-2 lg:grid-cols-3",
+      4: "grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
       5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
     }, g = {
       sm: "gap-4",
@@ -1516,12 +1516,12 @@ const He = N(
   }
 );
 He.displayName = "ProductGrid";
-function Qt({
+function Wt({
   ...a
 }) {
   return /* @__PURE__ */ e(w.Root, { "data-slot": "dialog", ...a });
 }
-function Wt({
+function Kt({
   ...a
 }) {
   return /* @__PURE__ */ e(w.Trigger, { "data-slot": "dialog-trigger", ...a });
@@ -1547,7 +1547,7 @@ function Ue({
     }
   );
 }
-function Kt({
+function Ot({
   className: a,
   children: t,
   ...r
@@ -1574,7 +1574,7 @@ function Kt({
     )
   ] });
 }
-function Ot({ className: a, ...t }) {
+function Xt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -1584,7 +1584,7 @@ function Ot({ className: a, ...t }) {
     }
   );
 }
-function Xt({ className: a, ...t }) {
+function Yt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -1597,7 +1597,7 @@ function Xt({ className: a, ...t }) {
     }
   );
 }
-function Yt({
+function Zt({
   className: a,
   ...t
 }) {
@@ -1610,7 +1610,7 @@ function Yt({
     }
   );
 }
-function Zt({
+function Jt({
   className: a,
   ...t
 }) {
@@ -1699,7 +1699,7 @@ function Ze({ className: a, ...t }) {
     }
   );
 }
-function Jt({ className: a, ...t }) {
+function ea({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -1722,7 +1722,7 @@ function Je({
     }
   );
 }
-function ea({
+function ta({
   className: a,
   ...t
 }) {
@@ -1735,7 +1735,18 @@ function ea({
     }
   );
 }
-const et = N(
+function et({ children: a, as: t = "div", className: r }) {
+  return /* @__PURE__ */ e(
+    t,
+    {
+      "data-slot": "container",
+      className: o("w-full mx-auto px-[var(--container-px)]", r),
+      style: { maxWidth: "var(--container-max)" },
+      children: a
+    }
+  );
+}
+const tt = N(
   ({ className: a, onThemeChange: t, onFontSizeChange: r, showA11yLink: n = !1, ...s }, c) => {
     const [l, m] = k("light"), [f, u] = k(16), [v, g] = k(!1);
     M(() => {
@@ -1772,7 +1783,7 @@ const et = N(
         role: "toolbar",
         "aria-label": "Ferramentas de acessibilidade",
         ...s,
-        children: /* @__PURE__ */ i("div", { className: "mx-auto max-w-7xl px-4 py-2 flex items-center justify-between", children: [
+        children: /* @__PURE__ */ i(et, { className: "py-2 flex items-center justify-between", children: [
           /* @__PURE__ */ i("div", { className: "flex items-center gap-2 text-sm text-[var(--muted-foreground)]", children: [
             /* @__PURE__ */ e(fe, { className: "h-4 w-4 flex-shrink-0", "aria-hidden": "true" }),
             /* @__PURE__ */ e("span", { className: "hidden sm:inline", children: "Ferramentas de Acessibilidade" })
@@ -1857,8 +1868,8 @@ const et = N(
     );
   }
 );
-et.displayName = "TopAccessibilityBar";
-const tt = N(
+tt.displayName = "TopAccessibilityBar";
+const at = N(
   ({
     className: a,
     slides: t,
@@ -1927,7 +1938,7 @@ const tt = N(
                       src: d.imageMobile,
                       srcSet: `${d.imageMobile} 1x, ${d.imageMobile.replace(/\.(jpg|png)$/, "@2x.$1")} 2x`,
                       alt: d.title,
-                      className: "w-full object-cover aspect-[5/6] md:aspect-video lg:aspect-[1920/700]",
+                      className: "w-full object-cover aspect-3/2 md:aspect-video lg:aspect-1920/700",
                       loading: p === 0 ? "eager" : "lazy"
                     }
                   )
@@ -1986,8 +1997,8 @@ const tt = N(
     ));
   }
 );
-tt.displayName = "HeroCarousel";
-function at({
+at.displayName = "HeroCarousel";
+function rt({
   className: a,
   children: t,
   viewport: r = !0,
@@ -2005,12 +2016,12 @@ function at({
       ...n,
       children: [
         t,
-        r && /* @__PURE__ */ e(st, {})
+        r && /* @__PURE__ */ e(lt, {})
       ]
     }
   );
 }
-function rt({
+function ot({
   className: a,
   ...t
 }) {
@@ -2039,10 +2050,10 @@ function G({
     }
   );
 }
-const ot = L(
+const it = L(
   "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 it({
+function nt({
   className: a,
   children: t,
   ...r
@@ -2051,7 +2062,7 @@ function it({
     S.Trigger,
     {
       "data-slot": "navigation-menu-trigger",
-      className: o(ot(), "group", a),
+      className: o(it(), "group", a),
       ...r,
       children: [
         t,
@@ -2067,7 +2078,7 @@ function it({
     }
   );
 }
-function nt({
+function st({
   className: a,
   ...t
 }) {
@@ -2084,7 +2095,7 @@ function nt({
     }
   );
 }
-function st({
+function lt({
   className: a,
   ...t
 }) {
@@ -2124,7 +2135,7 @@ function B({
     }
   );
 }
-function lt({ items: a }) {
+function dt({ items: a }) {
   return /* @__PURE__ */ e("ul", { className: "grid gap-0.5 p-2 min-w-[180px]", role: "none", children: a.map(
     (t) => {
       var r;
@@ -2206,7 +2217,7 @@ function Y({ item: a, depth: t = 0 }) {
     )
   ] });
 }
-const dt = N(
+const ct = N(
   ({ items: a, logo: t, rightSlot: r, searchSlot: n, drawerFooter: s, className: c, ...l }, m) => /* @__PURE__ */ e(
     "header",
     {
@@ -2255,12 +2266,12 @@ const dt = N(
           {
             "aria-label": "Menu principal",
             className: "hidden border-t border-[var(--border)] py-2 md:flex",
-            children: /* @__PURE__ */ e(at, { children: /* @__PURE__ */ e(rt, { children: a.map(
+            children: /* @__PURE__ */ e(rt, { children: /* @__PURE__ */ e(ot, { children: a.map(
               (f) => {
                 var u;
                 return (u = f.children) != null && u.length ? /* @__PURE__ */ i(G, { children: [
-                  /* @__PURE__ */ e(it, { className: "h-9 bg-transparent text-sm text-[var(--foreground)] hover:bg-[var(--accent)]", children: f.label }),
-                  /* @__PURE__ */ e(nt, { children: /* @__PURE__ */ e(lt, { items: f.children }) })
+                  /* @__PURE__ */ e(nt, { className: "h-9 bg-transparent text-sm text-[var(--foreground)] hover:bg-[var(--accent)]", children: f.label }),
+                  /* @__PURE__ */ e(st, { children: /* @__PURE__ */ e(dt, { items: f.children }) })
                 ] }, f.id) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
                   B,
                   {
@@ -2277,8 +2288,8 @@ const dt = N(
     }
   )
 );
-dt.displayName = "MegaMenu";
-const ct = [
+ct.displayName = "MegaMenu";
+const ut = [
   {
     id: "catalogo",
     title: "Catálogo",
@@ -2311,13 +2322,13 @@ const ct = [
       { label: "Sobre o APP", href: "/sobre-app" }
     ]
   }
-], ut = [
+], mt = [
   { label: "Instagram", href: "https://instagram.com/eloeditora", Icon: Ne },
   { label: "Facebook", href: "https://facebook.com/eloeditora", Icon: we },
   { label: "YouTube", href: "https://youtube.com/@eloeditora", Icon: ye },
   { label: "LinkedIn", href: "https://linkedin.com/company/eloeditora", Icon: ke }
 ];
-function mt({ onSubmit: a }) {
+function ft({ onSubmit: a }) {
   const [t, r] = k(""), [n, s] = k(!1);
   return /* @__PURE__ */ e("div", { className: "bg-[var(--brand-primary)] py-10", children: /* @__PURE__ */ i("div", { className: "mx-auto max-w-lg px-4 text-center", children: [
     /* @__PURE__ */ e(ze, { className: "mx-auto mb-4 h-10 w-10 text-white", "aria-hidden": "true" }),
@@ -2351,7 +2362,7 @@ function mt({ onSubmit: a }) {
     ] })
   ] }) });
 }
-function ft({ title: a, links: t }) {
+function gt({ title: a, links: t }) {
   const [r, n] = k(!1);
   return /* @__PURE__ */ i("div", { className: "border-b border-[var(--border)] md:border-none", children: [
     /* @__PURE__ */ i(
@@ -2394,7 +2405,7 @@ function ft({ title: a, links: t }) {
     )
   ] });
 }
-const gt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, className: r, ...n }) => {
+const vt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, className: r, ...n }) => {
   const [s, c] = k("light");
   M(() => {
     const u = document.documentElement;
@@ -2412,7 +2423,7 @@ const gt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, className: r, ...
       "aria-label": "Rodapé do site",
       ...n,
       children: [
-        /* @__PURE__ */ e(mt, { onSubmit: t }),
+        /* @__PURE__ */ e(ft, { onSubmit: t }),
         /* @__PURE__ */ i("div", { className: "mx-auto max-w-screen-xl px-4", children: [
           /* @__PURE__ */ i("div", { className: "py-10 md:grid md:grid-cols-4 md:gap-8", children: [
             /* @__PURE__ */ i("div", { className: "mb-8 md:mb-0", children: [
@@ -2427,7 +2438,7 @@ const gt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, className: r, ...
                 }
               ),
               /* @__PURE__ */ e("p", { className: "mt-3 max-w-xs text-sm text-[var(--muted-foreground)]", children: f }),
-              /* @__PURE__ */ e("div", { className: "mt-6 flex flex-wrap gap-2", "aria-label": "Redes sociais", children: ut.map(({ label: u, href: v, Icon: g }) => /* @__PURE__ */ e(
+              /* @__PURE__ */ e("div", { className: "mt-6 flex flex-wrap gap-2", "aria-label": "Redes sociais", children: mt.map(({ label: u, href: v, Icon: g }) => /* @__PURE__ */ e(
                 "a",
                 {
                   href: v,
@@ -2445,7 +2456,7 @@ const gt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, className: r, ...
                 /* @__PURE__ */ e("p", { className: "font-medium text-[var(--foreground)]", children: "(11) 3000-0000" })
               ] })
             ] }),
-            ct.map((u) => /* @__PURE__ */ e(ft, { title: u.title, links: u.links }, u.id))
+            ut.map((u) => /* @__PURE__ */ e(gt, { title: u.title, links: u.links }, u.id))
           ] }),
           /* @__PURE__ */ i("div", { className: "flex flex-col gap-2 border-t border-[var(--border)] py-6 text-xs text-[var(--muted-foreground)] sm:flex-row sm:items-center sm:justify-between", children: [
             /* @__PURE__ */ i("p", { children: [
@@ -2464,18 +2475,7 @@ const gt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, className: r, ...
     }
   );
 };
-gt.displayName = "Footer";
-function ta({ children: a, as: t = "div", className: r }) {
-  return /* @__PURE__ */ e(
-    t,
-    {
-      "data-slot": "container",
-      className: o("w-full mx-auto px-[var(--container-px)]", r),
-      style: { maxWidth: "var(--container-max)" },
-      children: a
-    }
-  );
-}
+vt.displayName = "Footer";
 function aa({ children: a, className: t }) {
   return /* @__PURE__ */ e(
     "div",
@@ -2489,7 +2489,7 @@ function aa({ children: a, className: t }) {
     }
   );
 }
-const vt = {
+const pt = {
   1: "col-span-1",
   2: "col-span-2",
   3: "col-span-3",
@@ -2498,71 +2498,71 @@ const vt = {
   6: "col-span-6"
 };
 function ra({ children: a, span: t, className: r }) {
-  return /* @__PURE__ */ e("div", { "data-slot": "col", className: o("min-w-0", t && vt[t], r), children: a });
+  return /* @__PURE__ */ e("div", { "data-slot": "col", className: o("min-w-0", t && pt[t], r), children: a });
 }
 export {
-  Bt as Accordion,
-  qt as AccordionContent,
-  Vt as AccordionItem,
-  Ft as AccordionTrigger,
+  Vt as Accordion,
+  Ht as AccordionContent,
+  Ft as AccordionItem,
+  qt as AccordionTrigger,
   De as Avatar,
   P as Badge,
-  Pt as Breadcrumb,
-  Rt as BreadcrumbItem,
-  Et as BreadcrumbLink,
-  At as BreadcrumbList,
-  $t as BreadcrumbPage,
-  Tt as BreadcrumbSeparator,
+  At as Breadcrumb,
+  Et as BreadcrumbItem,
+  $t as BreadcrumbLink,
+  Rt as BreadcrumbList,
+  Tt as BreadcrumbPage,
+  Bt as BreadcrumbSeparator,
   C as Button,
-  Mt as Checkbox,
+  Dt as Checkbox,
   ra as Col,
-  ta as Container,
-  Kt as DialogContent,
-  Zt as DialogDescription,
-  Xt as DialogFooter,
-  Ot as DialogHeader,
-  Yt as DialogTitle,
-  Wt as DialogTrigger,
+  et as Container,
+  Ot as DialogContent,
+  Jt as DialogDescription,
+  Yt as DialogFooter,
+  Xt as DialogHeader,
+  Zt as DialogTitle,
+  Kt as DialogTrigger,
   Pe as Divider,
   Qe as Drawer,
   X as EmptyState,
   qe as ErrorState,
-  gt as Footer,
+  vt as Footer,
   Be as FormGroup,
   aa as Grid,
   Fe as Hero,
-  tt as HeroCarousel,
-  kt as Input,
-  dt as MegaMenu,
-  Qt as Modal,
+  at as HeroCarousel,
+  zt as Input,
+  ct as MegaMenu,
+  Wt as Modal,
   $e as PriceDisplay,
   T as ProductCard,
   He as ProductGrid,
   la as ProgressBar,
   Te as QuantitySelector,
-  Dt as RadioGroup,
-  Lt as RadioGroupItem,
+  Lt as RadioGroup,
+  _t as RadioGroupItem,
   $ as Rating,
   Ee as SearchBar,
-  zt as Select,
-  It as SelectContent,
-  jt as SelectItem,
-  St as SelectTrigger,
-  Ct as SelectValue,
+  Ct as Select,
+  jt as SelectContent,
+  Mt as SelectItem,
+  It as SelectTrigger,
+  St as SelectValue,
   Ye as SheetContent,
-  ea as SheetDescription,
-  Jt as SheetFooter,
+  ta as SheetDescription,
+  ea as SheetFooter,
   Ze as SheetHeader,
   Je as SheetTitle,
   We as SheetTrigger,
   _e as Spinner,
   Ie as Textarea,
-  _t as Toggle,
-  Ht as Tooltip,
-  Ut as TooltipContent,
+  Pt as Toggle,
+  Gt as Tooltip,
+  Qt as TooltipContent,
   Ve as TooltipProvider,
-  Gt as TooltipTrigger,
-  et as TopAccessibilityBar,
+  Ut as TooltipTrigger,
+  tt as TopAccessibilityBar,
   Me as avatarVariants,
   je as badgeVariants,
   Se as buttonVariants,