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

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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

package/dist/index.js

@@ -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 }) }),
@@ -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",
@@ -1938,7 +1938,7 @@ const at = 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"
                     }
                   )