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

package/CHANGELOG.md

@@ -0,0 +1,69 @@
+# Changelog — `@grupo-elo-editorial/shared-ui-react`
+
+Format: [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) · Versioning: [SemVer](https://semver.org/spec/v2.0.0.html).
+
+---
+
+## [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.
+
+### Added — Layout primitives
+
+Three new layout components that consume the breakpoint/container/grid tokens introduced in `design-tokens@3.1.0`:
+
+- **`Container`** — page-level wrapper. Centers content within `var(--container-max)` (1280px) with responsive `var(--container-px)` (1.5rem) horizontal padding. Polymorphic via the `as` prop (defaults to `'div'`).
+- **`Grid`** — responsive grid primitive. Default progression: `grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4` with `gap-[var(--grid-gutter)]` (1.5rem). Override via `className`.
+- **`Col`** — grid cell with explicit column span (1–6). Always includes `min-w-0` to prevent overflow on wide content (long text, large images) — addresses the implicit `min-width: auto` gotcha on grid items.
+
+```tsx
+import { Container, Grid, Col } from '@grupo-elo-editorial/shared-ui-react';
+
+<Container as="section">
+  <Grid>
+    <Col><ProductCard ... /></Col>
+    <Col><ProductCard ... /></Col>
+    <Col span={2}>Wide cell</Col>
+  </Grid>
+</Container>
+```
+
+### Added — docs
+
+- `docs/SHARED_UI_STANDARDS.md` — prescriptive guide for the package: filosofia, naming conventions, design tokens, A11y WCAG 2.2 AA, estados de componentes, props API, composição, testes, performance, checklist de qualidade, versionamento.
+
+### Changed
+
+- `package.json` `version` bumped `1.0.0 → 1.1.0`.
+- `package.json` `description` updated to mention layout primitives + new `design-tokens@^3.1.0` minimum.
+- `src/index.ts` now re-exports `Container`, `Grid`, `Col` (and their `ContainerProps`/`GridProps`/`ColProps` types) from `./components/layout`.
+- `repository.url` now uses canonical `git+https://` scheme (eliminates `npm publish` warning).
+
+### Compat with design-tokens v3.1.0
+
+`@grupo-elo-editorial/design-tokens@^3.1.0` is the minimum effective dependency now (the layout primitives use `var(--container-max)`, `var(--container-px)`, and `var(--grid-gutter)` which were introduced in 3.1.0). Older 3.0.x of design-tokens still works for everything _except_ the layout primitives, which will render with browser-default sizing if the consumer hasn't bumped design-tokens.
+
+---
+
+## [1.0.0] — 2026-05-13 (Initial release — port from Figma)
+
+First public release. 42 components ported 1:1 from the Figma Make export `loEUZ5dnW0f4e8GwQIEWSz`.
+
+### Added
+
+- **7 custom atoms**: Button, Textarea, Badge, Avatar, Spinner, Divider, Rating
+- **5 custom molecules**: ProductCard, SearchBar, PriceDisplay, QuantitySelector, FormGroup
+- **4 custom organisms**: Hero, EmptyState, ErrorState, ProductGrid
+- **2 PRD domain components**: TopAccessibilityBar, HeroCarousel
+- **~50 shadcn/ui primitives** in `components/ui/` — Radix wrappers (Dialog, Sheet, Select, Tooltip, Accordion, Checkbox, Switch, RadioGroup, Breadcrumb, Progress, Calendar, Carousel, Chart, Command, ContextMenu, Drawer, DropdownMenu, Form, HoverCard, InputOTP, Menubar, NavigationMenu, Pagination, Popover, Resizable, ScrollArea, Separator, Sidebar, Skeleton, Slider, Sonner, Table, Tabs, ToggleGroup, …).
+- **Re-exports** from atoms/molecules/organisms barrels: `Input`, `Select*`, `Checkbox`, `RadioGroup*`, `Toggle (= Switch)`, `Breadcrumb*`, `Accordion*`, `Tooltip*`, `ProgressBar`, `toast (sonner)`, `Modal (= Dialog)`, `Drawer (= Sheet)`.
+- **`figma/ImageWithFallback`** helper.
+- **Util**: `cn` (clsx + tailwind-merge).
+- **Bundled CSS**: `dist/style.css` (96 kB, gzip 9 kB) — Lato fonts + Tailwind v4 + multibrand theme tokens with `[data-brand]` / `[data-theme]` selectors (aligned with `@grupo-elo-editorial/design-tokens@^3.0.0`).
+- **Docs imported from Figma**: `docs/COMPONENT_LIBRARY.md`, `docs/CORRECTIONS.md`, `docs/GUIDELINES.md`.
+
+### Notes
+
+- Stack: React 18+/19, TypeScript, Tailwind CSS v4, Radix UI, Lucide icons, Sonner toasts, `class-variance-authority` for variants.
+- Brand + theme contract: `<html data-brand="elo-editora|perabook" data-theme="light|dark">` — same as design-tokens.
+- The Figma export used `.brand-elo` / `.brand-pera` / `.dark` class selectors; this port adapted to `[data-brand]` / `[data-theme]` attribute selectors to match the design-tokens v3 contract. Component code consumes `var(--brand-*)` so the visual result is identical.

package/dist/components/layout/Col.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+export interface ColProps {
+    children: ReactNode;
+    /**
+     * How many grid columns this cell spans (1–6). When omitted, the cell takes
+     * one column at every breakpoint.
+     */
+    span?: 1 | 2 | 3 | 4 | 5 | 6;
+    className?: string;
+}
+/**
+ * Grid cell with explicit column span. Always includes `min-w-0` to prevent
+ * grid items from overflowing when their content (long text, large images) is
+ * wider than the available column — without this the implicit `min-width: auto`
+ * on grid items would push the cell beyond its grid track.
+ *
+ * Use inside `<Grid>`. Not strictly required (you can use a plain `<div>` for
+ * 1-column cells), but recommended for any cell that spans multiple columns.
+ *
+ * @example
+ * ```tsx
+ * <Grid>
+ *   <Col span={2}>Wide cell</Col>
+ *   <Col>Standard cell</Col>
+ *   <Col>Standard cell</Col>
+ * </Grid>
+ * ```
+ */
+export declare function Col({ children, span, className }: ColProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/Container.d.ts

@@ -0,0 +1,21 @@
+import { type ElementType, type ReactNode } from 'react';
+export interface ContainerProps {
+    children: ReactNode;
+    /** Override the wrapper element. Default `'div'`. */
+    as?: ElementType;
+    className?: string;
+}
+/**
+ * Page-level content wrapper. Centers content within `var(--container-max)`
+ * (1280px by default in `@grupo-elo-editorial/design-tokens@^3.1.0`) and applies
+ * the responsive `var(--container-px)` horizontal padding.
+ *
+ * @example
+ * ```tsx
+ * <Container as="section">
+ *   <h2>Section heading</h2>
+ *   <p>Body content stays within the centered, padded container.</p>
+ * </Container>
+ * ```
+ */
+export declare function Container({ children, as: Tag, className }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/Grid.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+export interface GridProps {
+    children: ReactNode;
+    /**
+     * Override the default responsive column progression
+     * (`grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4`) by appending Tailwind utility classes here.
+     */
+    className?: string;
+}
+/**
+ * Responsive grid primitive. Defaults to the progression defined by the
+ * `--grid-cols-{default,sm,md,lg}` tokens (1 → 2 → 3 → 4 columns) and the
+ * `--grid-gutter` (1.5rem) gap, both shipped by
+ * `@grupo-elo-editorial/design-tokens@^3.1.0`.
+ *
+ * @example
+ * ```tsx
+ * <Grid>
+ *   <Col><ProductCard ... /></Col>
+ *   <Col><ProductCard ... /></Col>
+ * </Grid>
+ * ```
+ */
+export declare function Grid({ children, className }: GridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export { Container } from './Container';
+export type { ContainerProps } from './Container';
+export { Grid } from './Grid';
+export type { GridProps } from './Grid';
+export { Col } from './Col';
+export type { ColProps } from './Col';

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export * from './components/atoms';
 export * from './components/molecules';
 export * from './components/organisms';
 export * from './components/prd';
+export * from './components/layout';
 export { cn } from './components/ui/utils';

package/dist/index.js

@@ -2,7 +2,7 @@ import { clsx as K } from "clsx";
 import { twMerge as J } from "tailwind-merge";
 import { jsx as e, jsxs as s, Fragment as j } from "react/jsx-runtime";
 import { forwardRef as N, useState as k, useEffect as D } from "react";
-import { Loader2 as E, User as Y, Star as Z, CheckIcon as V, ChevronDownIcon as B, ChevronUpIcon as O, CircleIcon as ee, Heart as te, ShoppingCart as _, Search as L, X as ae, Minus as H, Plus as q, ChevronRight as F, FileX as re, Package as ie, AlertCircle as se, RefreshCw as oe, Home as ne, XIcon as G, Eye as le, Moon as de, Sun as ce, ChevronLeft as ue } from "lucide-react";
+import { Loader2 as E, User as Y, Star as Z, CheckIcon as V, ChevronDownIcon as B, ChevronUpIcon as O, CircleIcon as ee, Heart as te, ShoppingCart as _, Search as L, X as ae, Minus as H, Plus as q, ChevronRight as G, FileX as re, Package as ie, AlertCircle as se, RefreshCw as oe, Home as ne, XIcon as F, Eye as le, Moon as de, Sun as ce, ChevronLeft as ue } from "lucide-react";
 import { cva as $ } from "class-variance-authority";
 import * as y from "@radix-ui/react-select";
 import * as A from "@radix-ui/react-checkbox";
@@ -11,8 +11,8 @@ import * as M from "@radix-ui/react-switch";
 import { Slot as me } from "@radix-ui/react-slot";
 import * as I from "@radix-ui/react-accordion";
 import * as C from "@radix-ui/react-tooltip";
-import { toast as jt } from "sonner";
-import { Progress as Pt } from "@radix-ui/react-progress";
+import { toast as Tt } from "sonner";
+import { Progress as Et } from "@radix-ui/react-progress";
 import * as w from "@radix-ui/react-dialog";
 function i(...a) {
   return J(K(a));
@@ -362,17 +362,17 @@ function Fe({ className: a, type: t, ...r }) {
     }
   );
 }
-function Ge({
+function Qe({
   ...a
 }) {
   return /* @__PURE__ */ e(y.Root, { "data-slot": "select", ...a });
 }
-function Qe({
+function Ue({
   ...a
 }) {
   return /* @__PURE__ */ e(y.Value, { "data-slot": "select-value", ...a });
 }
-function Ue({
+function We({
   className: a,
   size: t = "default",
   children: r,
@@ -395,7 +395,7 @@ function Ue({
     }
   );
 }
-function We({
+function Xe({
   className: a,
   children: t,
   position: r = "popper",
@@ -429,7 +429,7 @@ function We({
     }
   ) });
 }
-function Xe({
+function Ke({
   className: a,
   children: t,
   ...r
@@ -484,7 +484,7 @@ function we({
     }
   );
 }
-function Ke({
+function Je({
   className: a,
   ...t
 }) {
@@ -508,7 +508,7 @@ function Ke({
     }
   );
 }
-function Je({
+function Ye({
   className: a,
   ...t
 }) {
@@ -521,7 +521,7 @@ function Je({
     }
   );
 }
-function Ye({
+function Ze({
   className: a,
   ...t
 }) {
@@ -545,7 +545,7 @@ function Ye({
     }
   );
 }
-function Ze({
+function Oe({
   className: a,
   ...t
 }) {
@@ -916,10 +916,10 @@ const Se = N(
   ] })
 );
 Se.displayName = "FormGroup";
-function Oe({ ...a }) {
+function et({ ...a }) {
   return /* @__PURE__ */ e("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...a });
 }
-function et({ className: a, ...t }) {
+function tt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "ol",
     {
@@ -932,7 +932,7 @@ function et({ className: a, ...t }) {
     }
   );
 }
-function tt({ className: a, ...t }) {
+function at({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "li",
     {
@@ -942,7 +942,7 @@ function tt({ className: a, ...t }) {
     }
   );
 }
-function at({
+function rt({
   asChild: a,
   className: t,
   ...r
@@ -956,7 +956,7 @@ function at({
     }
   );
 }
-function rt({ className: a, ...t }) {
+function it({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "span",
     {
@@ -969,7 +969,7 @@ function rt({ className: a, ...t }) {
     }
   );
 }
-function it({
+function st({
   children: a,
   className: t,
   ...r
@@ -982,16 +982,16 @@ function it({
       "aria-hidden": "true",
       className: i("[&>svg]:size-3.5", t),
       ...r,
-      children: a ?? /* @__PURE__ */ e(F, {})
+      children: a ?? /* @__PURE__ */ e(G, {})
     }
   );
 }
-function st({
+function ot({
   ...a
 }) {
   return /* @__PURE__ */ e(I.Root, { "data-slot": "accordion", ...a });
 }
-function ot({
+function nt({
   className: a,
   ...t
 }) {
@@ -1004,7 +1004,7 @@ function ot({
     }
   );
 }
-function nt({
+function lt({
   className: a,
   children: t,
   ...r
@@ -1025,7 +1025,7 @@ function nt({
     }
   ) });
 }
-function lt({
+function dt({
   className: a,
   children: t,
   ...r
@@ -1053,17 +1053,17 @@ function Ce({
     }
   );
 }
-function dt({
+function ct({
   ...a
 }) {
   return /* @__PURE__ */ e(Ce, { children: /* @__PURE__ */ e(C.Root, { "data-slot": "tooltip", ...a }) });
 }
-function ct({
+function ut({
   ...a
 }) {
   return /* @__PURE__ */ e(C.Trigger, { "data-slot": "tooltip-trigger", ...a });
 }
-function ut({
+function mt({
   className: a,
   sideOffset: t = 0,
   children: r,
@@ -1391,12 +1391,12 @@ const De = N(
   }
 );
 De.displayName = "ProductGrid";
-function mt({
+function ft({
   ...a
 }) {
   return /* @__PURE__ */ e(w.Root, { "data-slot": "dialog", ...a });
 }
-function ft({
+function gt({
   ...a
 }) {
   return /* @__PURE__ */ e(w.Trigger, { "data-slot": "dialog-trigger", ...a });
@@ -1422,7 +1422,7 @@ function $e({
     }
   );
 }
-function gt({
+function pt({
   className: a,
   children: t,
   ...r
@@ -1441,7 +1441,7 @@ function gt({
         children: [
           t,
           /* @__PURE__ */ s(w.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
-            /* @__PURE__ */ e(G, {}),
+            /* @__PURE__ */ e(F, {}),
             /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
           ] })
         ]
@@ -1449,7 +1449,7 @@ function gt({
     )
   ] });
 }
-function pt({ className: a, ...t }) {
+function vt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -1459,7 +1459,7 @@ function pt({ className: a, ...t }) {
     }
   );
 }
-function vt({ className: a, ...t }) {
+function bt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -1472,7 +1472,7 @@ function vt({ className: a, ...t }) {
     }
   );
 }
-function bt({
+function ht({
   className: a,
   ...t
 }) {
@@ -1485,7 +1485,7 @@ function bt({
     }
   );
 }
-function ht({
+function xt({
   className: a,
   ...t
 }) {
@@ -1498,10 +1498,10 @@ function ht({
     }
   );
 }
-function xt({ ...a }) {
+function Nt({ ...a }) {
   return /* @__PURE__ */ e(w.Root, { "data-slot": "sheet", ...a });
 }
-function Nt({
+function wt({
   ...a
 }) {
   return /* @__PURE__ */ e(w.Trigger, { "data-slot": "sheet-trigger", ...a });
@@ -1527,7 +1527,7 @@ function Re({
     }
   );
 }
-function wt({
+function yt({
   className: a,
   children: t,
   side: r = "right",
@@ -1551,7 +1551,7 @@ function wt({
         children: [
           t,
           /* @__PURE__ */ s(w.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
-            /* @__PURE__ */ e(G, { className: "size-4" }),
+            /* @__PURE__ */ e(F, { className: "size-4" }),
             /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
           ] })
         ]
@@ -1559,7 +1559,7 @@ function wt({
     )
   ] });
 }
-function yt({ className: a, ...t }) {
+function kt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -1569,7 +1569,7 @@ function yt({ className: a, ...t }) {
     }
   );
 }
-function kt({ className: a, ...t }) {
+function zt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -1579,7 +1579,7 @@ function kt({ className: a, ...t }) {
     }
   );
 }
-function zt({
+function St({
   className: a,
   ...t
 }) {
@@ -1592,7 +1592,7 @@ function zt({
     }
   );
 }
-function St({
+function Ct({
   className: a,
   ...t
 }) {
@@ -1823,7 +1823,7 @@ const Be = N(
                 onClick: m,
                 className: "absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-white/90 p-2 shadow-lg transition-all hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] min-w-[44px] min-h-[44px]",
                 "aria-label": "Próximo slide",
-                children: /* @__PURE__ */ e(F, { className: "h-6 w-6 text-gray-900" })
+                children: /* @__PURE__ */ e(G, { className: "h-6 w-6 text-gray-900" })
               }
             )
           ] }),
@@ -1846,69 +1846,107 @@ const Be = N(
   }
 );
 Be.displayName = "HeroCarousel";
+function It({ children: a, as: t = "div", className: r }) {
+  return /* @__PURE__ */ e(
+    t,
+    {
+      "data-slot": "container",
+      className: i("w-full mx-auto px-[var(--container-px)]", r),
+      style: { maxWidth: "var(--container-max)" },
+      children: a
+    }
+  );
+}
+function jt({ children: a, className: t }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "grid",
+      className: i(
+        "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-[var(--grid-gutter)]",
+        t
+      ),
+      children: a
+    }
+  );
+}
+const Ae = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+  5: "col-span-5",
+  6: "col-span-6"
+};
+function Dt({ children: a, span: t, className: r }) {
+  return /* @__PURE__ */ e("div", { "data-slot": "col", className: i("min-w-0", t && Ae[t], r), children: a });
+}
 export {
-  st as Accordion,
-  lt as AccordionContent,
-  ot as AccordionItem,
-  nt as AccordionTrigger,
+  ot as Accordion,
+  dt as AccordionContent,
+  nt as AccordionItem,
+  lt as AccordionTrigger,
   ve as Avatar,
   P as Badge,
-  Oe as Breadcrumb,
-  tt as BreadcrumbItem,
-  at as BreadcrumbLink,
-  et as BreadcrumbList,
-  rt as BreadcrumbPage,
-  it as BreadcrumbSeparator,
+  et as Breadcrumb,
+  at as BreadcrumbItem,
+  rt as BreadcrumbLink,
+  tt as BreadcrumbList,
+  it as BreadcrumbPage,
+  st as BreadcrumbSeparator,
   z as Button,
-  Ke as Checkbox,
-  gt as DialogContent,
-  ht as DialogDescription,
-  vt as DialogFooter,
-  pt as DialogHeader,
-  bt as DialogTitle,
-  ft as DialogTrigger,
+  Je as Checkbox,
+  Dt as Col,
+  It as Container,
+  pt as DialogContent,
+  xt as DialogDescription,
+  bt as DialogFooter,
+  vt as DialogHeader,
+  ht as DialogTitle,
+  gt as DialogTrigger,
   xe as Divider,
-  xt as Drawer,
+  Nt as Drawer,
   W as EmptyState,
   je as ErrorState,
   Se as FormGroup,
+  jt as Grid,
   Ie as Hero,
   Be as HeroCarousel,
   Fe as Input,
-  mt as Modal,
+  ft as Modal,
   ke as PriceDisplay,
   R as ProductCard,
   De as ProductGrid,
-  Pt as ProgressBar,
+  Et as ProgressBar,
   ze as QuantitySelector,
-  Je as RadioGroup,
-  Ye as RadioGroupItem,
+  Ye as RadioGroup,
+  Ze as RadioGroupItem,
   U as Rating,
   ye as SearchBar,
-  Ge as Select,
-  We as SelectContent,
-  Xe as SelectItem,
-  Ue as SelectTrigger,
-  Qe as SelectValue,
-  wt as SheetContent,
-  St as SheetDescription,
-  kt as SheetFooter,
-  yt as SheetHeader,
-  zt as SheetTitle,
-  Nt as SheetTrigger,
+  Qe as Select,
+  Xe as SelectContent,
+  Ke as SelectItem,
+  We as SelectTrigger,
+  Ue as SelectValue,
+  yt as SheetContent,
+  Ct as SheetDescription,
+  zt as SheetFooter,
+  kt as SheetHeader,
+  St as SheetTitle,
+  wt as SheetTrigger,
   he as Spinner,
   fe as Textarea,
-  Ze as Toggle,
-  dt as Tooltip,
-  ut as TooltipContent,
+  Oe as Toggle,
+  ct as Tooltip,
+  mt as TooltipContent,
   Ce as TooltipProvider,
-  ct as TooltipTrigger,
+  ut as TooltipTrigger,
   Ee as TopAccessibilityBar,
   pe as avatarVariants,
   ge as badgeVariants,
   Q as buttonVariants,
   i as cn,
   be as spinnerVariants,
-  jt as toast
+  Tt as toast
 };
 //# sourceMappingURL=index.js.map