@grupo-elo-editorial/shared-ui-react 1.2.10 → 1.2.12

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { clsx as Z } from "clsx";
 import { twMerge as J } from "tailwind-merge";
-import { jsx as e, jsxs as i, Fragment as _ } from "react/jsx-runtime";
+import { jsx as e, jsxs as i, Fragment as P } from "react/jsx-runtime";
 import { forwardRef as x, useState as k, useEffect as M } from "react";
-import { Loader2 as V, User as ee, Star as te, CheckIcon as U, ChevronDownIcon as A, ChevronUpIcon as ae, CircleIcon as re, ShoppingCart as R, Heart as oe, Search as Q, X as ie, Minus as ne, Plus as se, ChevronRight as W, FileX as le, Package as de, AlertCircle as ce, RefreshCw as ue, Home as me, XIcon as K, Accessibility as fe, ZoomOut as ge, ZoomIn as ve, Moon as pe, Sun as be, ChevronLeft as he, Menu as xe, ChevronDown as O, Instagram as Ne, Facebook as we, Youtube as ye, Linkedin as ke, Mail as ze } from "lucide-react";
+import { Loader2 as V, User as ee, Star as te, CheckIcon as U, ChevronDownIcon as R, ChevronUpIcon as ae, CircleIcon as re, ShoppingCart as _, Heart as oe, Search as Q, X as ie, Minus as ne, Plus as se, ChevronRight as W, FileX as le, Package as de, AlertCircle as ce, RefreshCw as ue, Home as me, XIcon as K, Accessibility as fe, ZoomOut as ge, ZoomIn as ve, Moon as pe, Sun as be, ChevronLeft as he, Menu as xe, ChevronDown as O, Instagram as Ne, Facebook as we, Youtube as ye, Linkedin as ke, Mail as ze } from "lucide-react";
 import { cva as L } from "class-variance-authority";
 import * as z from "@radix-ui/react-select";
 import * as F from "@radix-ui/react-checkbox";
@@ -64,10 +64,10 @@ const Se = L(
       ref: v,
       disabled: f || s,
       ...u,
-      children: s ? /* @__PURE__ */ i(_, { children: [
+      children: s ? /* @__PURE__ */ i(P, { children: [
         /* @__PURE__ */ e(V, { className: "h-4 w-4 animate-spin" }),
         m && /* @__PURE__ */ e("span", { children: m })
-      ] }) : /* @__PURE__ */ i(_, { children: [
+      ] }) : /* @__PURE__ */ i(P, { children: [
         c && /* @__PURE__ */ e("span", { className: "inline-flex", children: c }),
         m,
         l && /* @__PURE__ */ e("span", { className: "inline-flex", children: l })
@@ -131,7 +131,7 @@ const je = L(
       size: "md"
     }
   }
-), P = x(
+), A = x(
   ({ className: a, variant: t, size: r, icon: n, onRemove: s, children: c, ...l }, m) => /* @__PURE__ */ i(
     "div",
     {
@@ -154,7 +154,7 @@ const je = L(
     }
   )
 );
-P.displayName = "Badge";
+A.displayName = "Badge";
 const Me = L(
   "relative inline-flex items-center justify-center overflow-hidden rounded-full bg-[var(--muted)] text-[var(--muted-foreground)] flex-shrink-0",
   {
@@ -221,7 +221,7 @@ const Le = L("animate-spin text-[var(--brand-primary)]", {
   defaultVariants: {
     size: "md"
   }
-}), _e = x(
+}), Pe = x(
   ({ className: a, size: t, label: r, ...n }, s) => /* @__PURE__ */ i(
     "div",
     {
@@ -237,8 +237,8 @@ const Le = L("animate-spin text-[var(--brand-primary)]", {
     }
   )
 );
-_e.displayName = "Spinner";
-const Pe = x(
+Pe.displayName = "Spinner";
+const Ae = x(
   ({ className: a, orientation: t = "horizontal", variant: r = "solid", text: n, ...s }, c) => {
     const l = {
       solid: "border-solid",
@@ -284,8 +284,8 @@ const Pe = x(
     );
   }
 );
-Pe.displayName = "Divider";
-const T = x(
+Ae.displayName = "Divider";
+const $ = x(
   ({
     className: a,
     value: t = 0,
@@ -347,7 +347,7 @@ const T = x(
     );
   }
 );
-T.displayName = "Rating";
+$.displayName = "Rating";
 function zt({ className: a, type: t, ...r }) {
   return /* @__PURE__ */ e(
     "input",
@@ -392,7 +392,7 @@ function It({
       ...n,
       children: [
         r,
-        /* @__PURE__ */ e(z.Icon, { asChild: !0, children: /* @__PURE__ */ e(A, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ e(z.Icon, { asChild: !0, children: /* @__PURE__ */ e(R, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -415,7 +415,7 @@ function jt({
       position: r,
       ...n,
       children: [
-        /* @__PURE__ */ e(Ae, {}),
+        /* @__PURE__ */ e(Re, {}),
         /* @__PURE__ */ e(
           z.Viewport,
           {
@@ -426,7 +426,7 @@ function jt({
             children: t
           }
         ),
-        /* @__PURE__ */ e(Re, {})
+        /* @__PURE__ */ e(_e, {})
       ]
     }
   ) });
@@ -452,7 +452,7 @@ function Mt({
     }
   );
 }
-function Ae({
+function Re({
   className: a,
   ...t
 }) {
@@ -469,7 +469,7 @@ function Ae({
     }
   );
 }
-function Re({
+function _e({
   className: a,
   ...t
 }) {
@@ -482,7 +482,7 @@ function Re({
         a
       ),
       ...t,
-      children: /* @__PURE__ */ e(A, { className: "size-4" })
+      children: /* @__PURE__ */ e(R, { className: "size-4" })
     }
   );
 }
@@ -523,7 +523,7 @@ function Lt({
     }
   );
 }
-function _t({
+function Pt({
   className: a,
   ...t
 }) {
@@ -547,7 +547,7 @@ function _t({
     }
   );
 }
-function Pt({
+function At({
   className: a,
   ...t
 }) {
@@ -579,7 +579,7 @@ function H({
 }) {
   return a ? /* @__PURE__ */ e("a", { href: a, className: t, tabIndex: -1, "aria-hidden": "true", children: r }) : /* @__PURE__ */ e("div", { className: t, children: r });
 }
-const $ = x(
+const T = x(
   ({
     className: a,
     image: t,
@@ -615,7 +615,7 @@ const $ = x(
           {
             className: o(
               "rounded-lg bg-[var(--muted)]",
-              p === "horizontal" ? "h-24 w-20 shrink-0" : "h-55 sm:h-66.5 w-36.75 sm:w-44.25"
+              p === "horizontal" ? "h-24 w-20 shrink-0" : "h-55 lg:h-66.5 w-full"
             )
           }
         ),
@@ -663,7 +663,7 @@ const $ = x(
           ) : /* @__PURE__ */ e("h3", { className: "line-clamp-2 text-sm font-medium text-[var(--card-foreground)]", children: r }),
           n && /* @__PURE__ */ e("p", { className: "text-xs text-[var(--muted-foreground)]", children: n }),
           l !== void 0 && /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ e(T, { value: l, size: "sm", readonly: !0 }),
+            /* @__PURE__ */ e($, { value: l, size: "sm", readonly: !0 }),
             m !== void 0 && /* @__PURE__ */ i("span", { className: "text-xs text-[var(--muted-foreground)]", children: [
               "(",
               m,
@@ -688,7 +688,7 @@ const $ = x(
               variant: "primary",
               size: "sm",
               fullWidth: !0,
-              leftIcon: /* @__PURE__ */ e(R, { className: "h-3.5 w-3.5" }),
+              leftIcon: /* @__PURE__ */ e(_, { className: "h-3.5 w-3.5" }),
               className: "mt-auto",
               children: g ? "Indisponível" : "Adicionar"
             }
@@ -701,7 +701,7 @@ const $ = x(
     {
       ref: j,
       className: o(
-        "group relative flex flex-col w-fit min-w-37.5 rounded-lg border-2 border-border bg-card transition-all hover:shadow-lg",
+        "group relative flex flex-col rounded-lg border-2 border-border bg-card transition-all hover:shadow-lg",
         g && "opacity-60",
         a
       ),
@@ -711,18 +711,30 @@ const $ = x(
           H,
           {
             href: d,
-            className: "relative block h-55 sm:h-66.5 w-fit overflow-hidden rounded-t-lg",
+            className: "relative block h-55 lg:h-66.5 w-full overflow-hidden rounded-t-lg",
             children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute inset-0 bg-cover bg-center",
+                  style: {
+                    backgroundImage: `url(${t})`,
+                    filter: "blur(14px) brightness(0.85)",
+                    transform: "scale(1.2)"
+                  }
+                }
+              ),
               /* @__PURE__ */ e(
                 "img",
                 {
                   src: t,
                   alt: r,
-                  className: "h-full w-auto transition-transform group-hover:scale-105"
+                  className: "relative z-10 h-full w-full object-contain transition-transform group-hover:scale-105"
                 }
               ),
-              f && /* @__PURE__ */ e("div", { className: "absolute left-3 top-3", children: /* @__PURE__ */ e(P, { variant: u, children: f }) }),
-              g && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ e(P, { variant: "danger", size: "lg", children: "Esgotado" }) })
+              f && /* @__PURE__ */ e("div", { className: "absolute left-3 top-3 z-20", children: /* @__PURE__ */ e(A, { variant: u, children: f }) }),
+              g && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ e(A, { variant: "danger", size: "lg", children: "Esgotado" }) })
             ]
           }
         ),
@@ -748,13 +760,13 @@ const $ = x(
             "a",
             {
               href: d,
-              className: "line-clamp-2 text-base font-medium text-[var(--card-foreground)] hover:text-[var(--brand-primary)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] rounded",
+              className: "wrap-break-word text-base font-medium text-card-foreground hover:text-brand-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
               children: r
             }
-          ) : /* @__PURE__ */ e("h3", { className: "line-clamp-2 text-base font-medium text-[var(--card-foreground)]", children: r }),
+          ) : /* @__PURE__ */ e("h3", { className: "wrap-break-word text-base font-medium text-card-foreground", children: r }),
           n && /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-[var(--muted-foreground)]", children: n }),
           l !== void 0 && /* @__PURE__ */ i("div", { className: "mt-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ e(T, { value: l, size: "sm", readonly: !0 }),
+            /* @__PURE__ */ e($, { value: l, size: "sm", readonly: !0 }),
             m !== void 0 && /* @__PURE__ */ i("span", { className: "text-sm text-[var(--muted-foreground)]", children: [
               "(",
               m,
@@ -779,7 +791,7 @@ const $ = x(
               variant: "primary",
               size: "md",
               fullWidth: !0,
-              leftIcon: /* @__PURE__ */ e(R, { className: "h-4 w-4" }),
+              leftIcon: /* @__PURE__ */ e(_, { className: "h-4 w-4" }),
               className: o(
                 "mt-4 transition-all duration-200",
                 "opacity-0 translate-y-2",
@@ -794,7 +806,7 @@ const $ = x(
     }
   )
 );
-$.displayName = "ProductCard";
+T.displayName = "ProductCard";
 const Ee = x(
   ({
     className: a,
@@ -857,7 +869,7 @@ const Ee = x(
   }
 );
 Ee.displayName = "SearchBar";
-const Te = x(
+const $e = x(
   ({
     className: a,
     price: t,
@@ -902,7 +914,7 @@ const Te = x(
             }
           )
         ] }),
-        c && u > 0 && /* @__PURE__ */ i(P, { variant: "success", size: "sm", children: [
+        c && u > 0 && /* @__PURE__ */ i(A, { variant: "success", size: "sm", children: [
           "-",
           u,
           "%"
@@ -920,8 +932,8 @@ const Te = x(
     ] });
   }
 );
-Te.displayName = "PriceDisplay";
-const $e = x(
+$e.displayName = "PriceDisplay";
+const Te = x(
   ({
     className: a,
     value: t,
@@ -1001,7 +1013,7 @@ const $e = x(
     ] });
   }
 );
-$e.displayName = "QuantitySelector";
+Te.displayName = "QuantitySelector";
 const Be = x(
   ({ className: a, label: t, htmlFor: r, required: n, error: s, helperText: c, children: l, ...m }, f) => /* @__PURE__ */ i("div", { ref: f, className: o("flex flex-col gap-1.5", a), ...m, children: [
     t && /* @__PURE__ */ i(
@@ -1029,10 +1041,10 @@ const Be = x(
   ] })
 );
 Be.displayName = "FormGroup";
-function At({ ...a }) {
+function Rt({ ...a }) {
   return /* @__PURE__ */ e("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...a });
 }
-function Rt({ className: a, ...t }) {
+function _t({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "ol",
     {
@@ -1055,7 +1067,7 @@ function Et({ className: a, ...t }) {
     }
   );
 }
-function Tt({
+function $t({
   asChild: a,
   className: t,
   ...r
@@ -1069,7 +1081,7 @@ function Tt({
     }
   );
 }
-function $t({ className: a, ...t }) {
+function Tt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "span",
     {
@@ -1133,7 +1145,7 @@ function qt({
       ...r,
       children: [
         t,
-        /* @__PURE__ */ e(A, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ e(R, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
       ]
     }
   ) });
@@ -1227,7 +1239,7 @@ const Fe = x(
       ),
       ...v,
       children: [
-        m && /* @__PURE__ */ i(_, { children: [
+        m && /* @__PURE__ */ i(P, { children: [
           /* @__PURE__ */ e(
             "div",
             {
@@ -1320,7 +1332,7 @@ const X = x(
     const u = r || {
       default: /* @__PURE__ */ e(de, { className: "h-16 w-16" }),
       search: /* @__PURE__ */ e(Q, { className: "h-16 w-16" }),
-      cart: /* @__PURE__ */ e(R, { className: "h-16 w-16" }),
+      cart: /* @__PURE__ */ e(_, { className: "h-16 w-16" }),
       error: /* @__PURE__ */ e(le, { className: "h-16 w-16" })
     }[t];
     return /* @__PURE__ */ i(
@@ -1454,13 +1466,13 @@ const He = x(
       {
         ref: u,
         className: o(
-          "flex flex-wrap",
+          "grid grid-cols-2 lg:grid-cols-4",
           v[n],
           a
         ),
         ...f,
         children: Array.from({ length: c }).map((g, b) => /* @__PURE__ */ e(
-          $,
+          T,
           {
             image: "",
             title: "",
@@ -1486,12 +1498,12 @@ const He = x(
       {
         ref: u,
         className: o(
-          "flex flex-wrap",
+          "grid grid-cols-2 lg:grid-cols-4",
           v[n],
           a
         ),
         ...f,
-        children: t.map((g, b) => /* @__PURE__ */ e($, { ...g }, b))
+        children: t.map((g, b) => /* @__PURE__ */ e(T, { ...g }, b))
       }
     );
   }
@@ -1940,7 +1952,7 @@ const at = x(
             },
             d.id
           )) }),
-          t.length > 1 && /* @__PURE__ */ i(_, { children: [
+          t.length > 1 && /* @__PURE__ */ i(P, { children: [
             /* @__PURE__ */ e(
               "button",
               {
@@ -2049,7 +2061,7 @@ function nt({
         t,
         " ",
         /* @__PURE__ */ e(
-          A,
+          R,
           {
             className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
@@ -2396,7 +2408,7 @@ const vt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, className: r, ...
     });
     return v.observe(u, { attributes: !0, attributeFilter: ["data-theme"] }), () => v.disconnect();
   }, []);
-  const l = a === "perabook" ? s === "dark" ? "/logos/logo_PeraBook_institucional_tarja_branca.png" : "/logos/PeraBook_instituicional.png" : s === "dark" ? "/logos/logo_elo_editora_texto_branco.png" : "/logos/logo_elo_editora_texto_azul.png", m = a === "perabook" ? "PeraBook" : "Elo Editora", f = a === "perabook" ? "Educação socioemocional e diversidade cultural" : "Literatura infantojuvenil que transforma vidas";
+  const l = a === "perabook" ? s === "dark" ? "/logos/logo_PeraBook_institucional_tarja_branca.png" : "/logos/PeraBook_instituicional.png" : s === "dark" ? "/logos/logo_elo_editora_texto_branco.png" : "/logos/logo_elo_institucional.png", m = a === "perabook" ? "PeraBook" : "Elo Editora", f = a === "perabook" ? "Educação socioemocional e diversidade cultural" : "Literatura infantojuvenil que transforma vidas";
   return /* @__PURE__ */ i(
     "footer",
     {
@@ -2487,12 +2499,12 @@ export {
   Ft as AccordionItem,
   qt as AccordionTrigger,
   De as Avatar,
-  P as Badge,
-  At as Breadcrumb,
+  A as Badge,
+  Rt as Breadcrumb,
   Et as BreadcrumbItem,
-  Tt as BreadcrumbLink,
-  Rt as BreadcrumbList,
-  $t as BreadcrumbPage,
+  $t as BreadcrumbLink,
+  _t as BreadcrumbList,
+  Tt as BreadcrumbPage,
   Bt as BreadcrumbSeparator,
   C as Button,
   Dt as Checkbox,
@@ -2504,7 +2516,7 @@ export {
   Xt as DialogHeader,
   Zt as DialogTitle,
   Kt as DialogTrigger,
-  Pe as Divider,
+  Ae as Divider,
   Qe as Drawer,
   X as EmptyState,
   qe as ErrorState,
@@ -2516,14 +2528,14 @@ export {
   zt as Input,
   ct as MegaMenu,
   Wt as Modal,
-  Te as PriceDisplay,
-  $ as ProductCard,
+  $e as PriceDisplay,
+  T as ProductCard,
   He as ProductGrid,
   la as ProgressBar,
-  $e as QuantitySelector,
+  Te as QuantitySelector,
   Lt as RadioGroup,
-  _t as RadioGroupItem,
-  T as Rating,
+  Pt as RadioGroupItem,
+  $ as Rating,
   Ee as SearchBar,
   Ct as Select,
   jt as SelectContent,
@@ -2536,9 +2548,9 @@ export {
   Ze as SheetHeader,
   Je as SheetTitle,
   We as SheetTrigger,
-  _e as Spinner,
+  Pe as Spinner,
   Ie as Textarea,
-  Pt as Toggle,
+  At as Toggle,
   Gt as Tooltip,
   Qt as TooltipContent,
   Ve as TooltipProvider,