@grupo-elo-editorial/shared-ui-react 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -4,6 +4,50 @@ Format: [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) · Versioning:
 
 ---
 
+## [1.2.1] — 2026-05-24 (Hotfix — exports.development leaking into published tarball)
+
+### Fixed
+
+- **`exports` resolution in npm-consumed dev mode**: the package.json `exports."." .development` condition resolved to `./src/index.ts`, but `src/` was not included in the published tarball (`files: ["dist", ...]`). This worked silently when the package was consumed from the workspace (where `src/` exists), but broke any consumer that pulled `@grupo-elo-editorial/shared-ui-react` from npm and ran a tool that matches the `development` export condition (Webpack/Turbopack in Next.js dev mode, Vite dev). The failure mode was a hard *Module not found: Can't resolve '@grupo-elo-editorial/shared-ui-react'* with no obvious cause — webpack honored the condition, tried `./src/index.ts`, didn't find it, and gave up instead of falling through to `import`.
+
+  Fix removes the `development` condition entirely. Both workspace consumers and npm consumers now resolve via `import: ./dist/index.js`, which works in both contexts. Workspace developers can run `pnpm build --watch` if they need source HMR.
+
+### Changed
+
+- `package.json` `version` bumped `1.2.0 → 1.2.1`.
+
+---
+
+## [1.2.0] — 2026-05-24 (HeroCarousel aspect ratios + RSC compatibility)
+
+### Fixed
+
+- **`TopAccessibilityBar`**: the bar background was `var(--background)` — identical to the page background, so the bar blended in and visually disappeared. The "Ferramentas de Acessibilidade" label was also hidden below the `md:` (768px) breakpoint. Switched the bar to `var(--card)` so it sits on the elevated surface (matching the mockup), and dropped the label breakpoint from `md:` to `sm:` (640px) so the label is visible on most desktops/tablets, hiding only on narrow phones.
+
+- **`Footer`**: the catalog navigation column had two entries pointing to the same `href` (`/livros/catalogo` for both "Livros" and "Mais Vendidos"), and the `<li>` `map` used `key={link.href}` — triggering a React duplicate-key warning on every render. Switched the key to `link.label` (unique within a column) and made "Mais Vendidos" point to `/livros/catalogo?ordem=mais_vendidos`. Also redirected "Lançamentos" from the non-existent `/lancamentos` route to `/livros/catalogo?ordem=recentes`, so the link now lands on the catalog with the right sort applied instead of 404'ing.
+
+- **`HeroCarousel`**: the `<img>` aspect ratio was `aspect-[3/4] md:aspect-video` for every breakpoint ≥768px. On desktop this produced a ~720px-tall hero in a 1280px viewport — significantly taller than the mockup (440px) and mismatched against the panoramic desktop banner artwork specified by the site-multibrand PRD (F3 — desktop 1920×700, ratio ~2.74:1). Updated to `aspect-[5/6] md:aspect-video lg:aspect-[1920/700]`, which now matches the PRD-specified artwork dimensions at each breakpoint: mobile 750×900, tablet 1024×576, desktop 1920×700.
+
+- **React Server Components compatibility**: six components used React hooks (`useState`, `useEffect`) without a `'use client'` directive. When consumed from npm as built `dist/` they worked because Vite preserved the runtime behavior, but when resolved via the `development` export condition to the raw `src/` (e.g. when linked into a Next.js App Router project from the workspace) they failed with *"You're importing a component that needs `useState`. This React Hook only works in a Client Component."* Added `'use client'` to:
+  - `atoms/Avatar.tsx`
+  - `atoms/Rating.tsx`
+  - `figma/ImageWithFallback.tsx`
+  - `molecules/SearchBar.tsx`
+  - `prd/HeroCarousel.tsx`
+  - `prd/TopAccessibilityBar.tsx`
+
+  Other client components (`prd/Footer.tsx`, `prd/MegaMenu.tsx`, plus the `ui/` Radix wrappers) already had the directive.
+
+### Migration
+
+No API change. Consumers passing custom `className` to `<HeroCarousel>` continue to work as before. Visual change only — the hero will be shorter on desktop and slightly less tall on mobile. If a consumer was depending on the previous heights, override via `className` on the wrapper to constrain max-height.
+
+### Changed
+
+- `package.json` `version` bumped `1.1.0 → 1.2.0`.
+
+---
+
 ## [1.1.0] — 2026-05-20 (Layout primitives + Figma shared-ui sync)
 
 Additive sync with the upstream Figma shared-ui file (`q4V5CYymU4oU5nlbbHNmh8`) and with `@grupo-elo-editorial/design-tokens@3.1.0`. No breaking changes; consumers of `^1.0.0` can bump to `^1.1.0` with zero code changes.

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

@@ -2,6 +2,7 @@ import { HTMLAttributes } from 'react';
 export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
     image: string;
     title: string;
+    author?: string;
     price: number;
     originalPrice?: number;
     rating?: number;
@@ -13,6 +14,10 @@ export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
     onAddToCart?: () => void;
     onToggleFavorite?: () => void;
     isFavorite?: boolean;
+    /** Makes the card image and title clickable as a link. */
+    href?: string;
+    /** 'vertical' (default) stacks image above content; 'horizontal' places a compact image to the left. */
+    orientation?: 'vertical' | 'horizontal';
 }
 declare const ProductCard: import("react").ForwardRefExoticComponent<ProductCardProps & import("react").RefAttributes<HTMLDivElement>>;
 export { ProductCard };

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

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+export interface FooterProps extends HTMLAttributes<HTMLElement> {
+    brand?: 'elo-editora' | 'perabook';
+    onNewsletterSubmit?: (email: string) => void;
+}
+declare const Footer: {
+    ({ brand, onNewsletterSubmit, className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Footer };

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+export interface NavItem {
+    id: string;
+    label: string;
+    href?: string;
+    children?: NavItem[];
+}
+export interface MegaMenuProps extends HTMLAttributes<HTMLElement> {
+    items: NavItem[];
+    logo?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    searchSlot?: React.ReactNode;
+    drawerFooter?: React.ReactNode;
+}
+declare const MegaMenu: import("react").ForwardRefExoticComponent<MegaMenuProps & import("react").RefAttributes<HTMLElement>>;
+export { MegaMenu };

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

@@ -2,6 +2,7 @@ import { HTMLAttributes } from 'react';
 export interface TopAccessibilityBarProps extends HTMLAttributes<HTMLDivElement> {
     onThemeChange?: (theme: 'light' | 'dark') => void;
     onFontSizeChange?: (size: number) => void;
+    showA11yLink?: boolean;
 }
 declare const TopAccessibilityBar: import("react").ForwardRefExoticComponent<TopAccessibilityBarProps & import("react").RefAttributes<HTMLDivElement>>;
 export { TopAccessibilityBar };

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

@@ -2,3 +2,7 @@ export { TopAccessibilityBar } from './TopAccessibilityBar';
 export type { TopAccessibilityBarProps } from './TopAccessibilityBar';
 export { HeroCarousel } from './HeroCarousel';
 export type { HeroCarouselProps, HeroSlide } from './HeroCarousel';
+export { MegaMenu } from './MegaMenu';
+export type { MegaMenuProps, NavItem } from './MegaMenu';
+export { Footer } from './Footer';
+export type { FooterProps } from './Footer';