@grupo-elo-editorial/shared-ui-react 1.3.17 → 1.4.0

package/CHANGELOG.md

@@ -4,6 +4,22 @@ Format: [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) · Versioning:
 
 ---
 
+## [1.4.0] — 2026-06-10 (Footer navColumns + ProductCard/ProductGrid renderImage)
+
+### Added
+
+- **`Footer`**: nova prop opcional `navColumns: FooterNavColumn[]` para que o app consumidor injete suas próprias colunas de navegação. Quando omitida, mantém o default do pacote (comportamento anterior preservado — sem breaking change). Novo tipo exportado `FooterNavColumn` (`{ id, title, links }`). (ELO-379)
+- **`ProductCard`** e **`ProductGrid`**: nova prop opcional `renderImage` (tipo `ProductImageRenderer`) para injetar a renderização da imagem da capa. Mantém o pacote framework-agnóstico — o default é um `<img>` nativo com `loading="lazy"` + `decoding="async"`; consumidores Next.js podem injetar `next/image` (modo `fill`) para WebP/AVIF + resize dinâmico. Novo tipo exportado `ProductImageRenderer`. (ELO-383)
+
+### Changed
+
+- **`ProductCard`**: as imagens das capas (layouts vertical e horizontal) agora passam por `renderImage`. O container da imagem horizontal recebeu `relative` para suportar `next/image` em modo `fill`. Sem mudança no comportamento visual default.
+- `package.json` `version` bumped `1.3.17 → 1.4.0` (minor — props opcionais, retrocompatível).
+
+> Nota: o `HeroCarousel` NÃO foi alterado. Ele usa `<picture>` com 3 crops distintos (desktop/tablet/mobile) — *art-direction* — onde `next/image` não encaixa bem; já é responsivo (srcSet 1x/2x) + lazy.
+
+---
+
 ## [1.3.17] — 2026-06-05 (Footer — logo Elo Editora aumentada para h-14)
 
 ### Fixed

package/dist/components/molecules/ProductCard.d.ts

@@ -1,4 +1,24 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, type ReactNode } from 'react';
+/**
+ * Render function injetável para a imagem da capa.
+ *
+ * O pacote é framework-agnóstico (sem dependência de Next.js). Por padrão
+ * renderiza um `<img>` nativo com `loading="lazy"`. Um consumidor Next.js pode
+ * injetar `next/image` (modo `fill`) para ganhar WebP/AVIF + resize dinâmico —
+ * o container da imagem é `position: relative`, então `fill` funciona.
+ *
+ * Exemplo (site-multibrand):
+ *   renderImage={({ src, alt, className }) => (
+ *     <Image src={src} alt={alt} className={className} fill sizes="(max-width:768px) 50vw, 25vw" />
+ *   )}
+ *
+ * ELO-383
+ */
+export type ProductImageRenderer = (props: {
+    src: string;
+    alt: string;
+    className: string;
+}) => ReactNode;
 export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
     image: string;
     title: string;
@@ -18,6 +38,11 @@ export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
     href?: string;
     /** 'vertical' (default) stacks image above content; 'horizontal' places a compact image to the left. */
     orientation?: 'vertical' | 'horizontal';
+    /**
+     * Render function opcional para a imagem da capa. Default: `<img loading="lazy">`.
+     * Consumidores Next.js podem injetar `next/image` (modo `fill`). Ver `ProductImageRenderer`.
+     */
+    renderImage?: ProductImageRenderer;
 }
 declare const ProductCard: import("react").ForwardRefExoticComponent<ProductCardProps & import("react").RefAttributes<HTMLDivElement>>;
 export { ProductCard };

package/dist/components/molecules/index.d.ts

@@ -1,5 +1,5 @@
 export { ProductCard } from './ProductCard';
-export type { ProductCardProps } from './ProductCard';
+export type { ProductCardProps, ProductImageRenderer } from './ProductCard';
 export { SearchBar } from './SearchBar';
 export type { SearchBarProps } from './SearchBar';
 export { PriceDisplay } from './PriceDisplay';

package/dist/components/organisms/ProductGrid.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { ProductCardProps } from '../molecules/ProductCard';
+import { ProductCardProps, type ProductImageRenderer } from '../molecules/ProductCard';
 export interface ProductGridProps extends HTMLAttributes<HTMLDivElement> {
     products: ProductCardProps[];
     columns?: 2 | 3 | 4 | 5;
@@ -8,6 +8,11 @@ export interface ProductGridProps extends HTMLAttributes<HTMLDivElement> {
     skeletonCount?: number;
     emptyStateMessage?: string;
     onEmptyAction?: () => void;
+    /**
+     * Render function aplicada à imagem de todos os cards (default: `<img loading="lazy">`).
+     * Consumidores Next.js podem injetar `next/image`. Ver `ProductImageRenderer`. ELO-383.
+     */
+    renderImage?: ProductImageRenderer;
 }
 declare const ProductGrid: import("react").ForwardRefExoticComponent<ProductGridProps & import("react").RefAttributes<HTMLDivElement>>;
 export { ProductGrid };

package/dist/components/prd/Footer.d.ts

@@ -16,6 +16,14 @@ export interface OrgInfo {
     /** URL do badge da App Store (tema escuro) */
     appStoreBadgeUrlDark?: string;
 }
+export interface FooterNavColumn {
+    id: string;
+    title: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
 export interface FooterProps extends HTMLAttributes<HTMLElement> {
     brand?: 'elo-editora' | 'perabook';
     onNewsletterSubmit?: (email: string) => void;
@@ -27,9 +35,11 @@ export interface FooterProps extends HTMLAttributes<HTMLElement> {
     appStoreUrl?: string;
     /** Dados da organização vindos do Firestore (sites/{brand}/org_grupo_elo/info). */
     orgInfo?: OrgInfo;
+    /** Colunas de navegação. Quando omitido, usa o default do pacote. */
+    navColumns?: FooterNavColumn[];
 }
 declare const Footer: {
-    ({ brand, onNewsletterSubmit, newsletterSlot, playStoreUrl, appStoreUrl, orgInfo, className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+    ({ brand, onNewsletterSubmit, newsletterSlot, playStoreUrl, appStoreUrl, orgInfo, navColumns, className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Footer };

package/dist/components/prd/index.d.ts

@@ -5,4 +5,4 @@ export type { HeroCarouselProps, HeroSlide } from './HeroCarousel';
 export { MegaMenu } from './MegaMenu';
 export type { MegaMenuProps, NavItem } from './MegaMenu';
 export { Footer } from './Footer';
-export type { FooterProps, OrgInfo } from './Footer';
+export type { FooterProps, OrgInfo, FooterNavColumn } from './Footer';