@grupo-elo-editorial/shared-ui-react 1.2.2 → 1.2.4

package/dist/index.js

@@ -1,16 +1,16 @@
 "use client";
 import { clsx as Z } from "clsx";
 import { twMerge as J } from "tailwind-merge";
-import { jsx as e, jsxs as i, Fragment as A } from "react/jsx-runtime";
+import { jsx as e, jsxs as i, Fragment as _ } from "react/jsx-runtime";
 import { forwardRef as N, useState as k, useEffect as M } from "react";
-import { Loader2 as V, User as ee, Star as te, CheckIcon as U, ChevronDownIcon as E, ChevronUpIcon as ae, CircleIcon as re, ShoppingCart as L, 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 P } from "class-variance-authority";
+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 { cva as L } from "class-variance-authority";
 import * as z from "@radix-ui/react-select";
 import * as F from "@radix-ui/react-checkbox";
-import * as T from "@radix-ui/react-radio-group";
+import * as E from "@radix-ui/react-radio-group";
 import * as q from "@radix-ui/react-switch";
 import { Slot as Ce } from "@radix-ui/react-slot";
-import * as _ from "@radix-ui/react-accordion";
+import * as D from "@radix-ui/react-accordion";
 import * as I from "@radix-ui/react-tooltip";
 import { toast as na } from "sonner";
 import { Progress as la } from "@radix-ui/react-progress";
@@ -19,7 +19,7 @@ import * as S from "@radix-ui/react-navigation-menu";
 function o(...a) {
   return J(Z(a));
 }
-const Se = P(
+const Se = L(
   "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 whitespace-nowrap",
   {
     variants: {
@@ -52,7 +52,7 @@ const Se = P(
     size: r,
     fullWidth: n,
     isLoading: s,
-    leftIcon: d,
+    leftIcon: c,
     rightIcon: l,
     children: m,
     disabled: f,
@@ -64,11 +64,11 @@ const Se = P(
       ref: v,
       disabled: f || s,
       ...u,
-      children: s ? /* @__PURE__ */ i(A, { children: [
+      children: s ? /* @__PURE__ */ i(_, { children: [
         /* @__PURE__ */ e(V, { className: "h-4 w-4 animate-spin" }),
         m && /* @__PURE__ */ e("span", { children: m })
-      ] }) : /* @__PURE__ */ i(A, { children: [
-        d && /* @__PURE__ */ e("span", { className: "inline-flex", children: d }),
+      ] }) : /* @__PURE__ */ i(_, { children: [
+        c && /* @__PURE__ */ e("span", { className: "inline-flex", children: c }),
         m,
         l && /* @__PURE__ */ e("span", { className: "inline-flex", children: l })
       ] })
@@ -107,7 +107,7 @@ const Ie = N(
   ] })
 );
 Ie.displayName = "Textarea";
-const je = P(
+const je = L(
   "inline-flex items-center rounded-full font-medium transition-colors whitespace-nowrap",
   {
     variants: {
@@ -131,8 +131,8 @@ const je = P(
       size: "md"
     }
   }
-), D = N(
-  ({ className: a, variant: t, size: r, icon: n, onRemove: s, children: d, ...l }, m) => /* @__PURE__ */ i(
+), P = N(
+  ({ className: a, variant: t, size: r, icon: n, onRemove: s, children: c, ...l }, m) => /* @__PURE__ */ i(
     "div",
     {
       ref: m,
@@ -140,7 +140,7 @@ const je = P(
       ...l,
       children: [
         n && /* @__PURE__ */ e("span", { className: "mr-1 inline-flex", children: n }),
-        d,
+        c,
         s && /* @__PURE__ */ e(
           "button",
           {
@@ -154,8 +154,8 @@ const je = P(
     }
   )
 );
-D.displayName = "Badge";
-const Me = P(
+P.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",
   {
     variants: {
@@ -170,9 +170,9 @@ const Me = P(
       size: "md"
     }
   }
-), _e = N(
-  ({ className: a, size: t, src: r, alt: n, name: s, showStatus: d, statusType: l = "online", ...m }, f) => {
-    const [u, v] = k(!1), g = (x) => x.split(" ").map((c) => c[0]).join("").toUpperCase().slice(0, 2), b = {
+), De = N(
+  ({ className: a, size: t, src: r, alt: n, name: s, showStatus: c, statusType: l = "online", ...m }, f) => {
+    const [u, v] = k(!1), g = (x) => x.split(" ").map((d) => d[0]).join("").toUpperCase().slice(0, 2), b = {
       online: "bg-[var(--success)]",
       offline: "bg-[var(--muted-foreground)]",
       away: "bg-[var(--warning)]",
@@ -194,7 +194,7 @@ const Me = P(
           ...m
         }
       ) : s ? /* @__PURE__ */ e("span", { className: "font-medium", children: g(s) }) : /* @__PURE__ */ e(ee, { className: "h-1/2 w-1/2" }),
-      d && /* @__PURE__ */ e(
+      c && /* @__PURE__ */ e(
         "span",
         {
           className: o(
@@ -208,8 +208,8 @@ const Me = P(
     ] });
   }
 );
-_e.displayName = "Avatar";
-const Pe = P("animate-spin text-[var(--brand-primary)]", {
+De.displayName = "Avatar";
+const Le = L("animate-spin text-[var(--brand-primary)]", {
   variants: {
     size: {
       sm: "h-4 w-4",
@@ -221,7 +221,7 @@ const Pe = P("animate-spin text-[var(--brand-primary)]", {
   defaultVariants: {
     size: "md"
   }
-}), Ae = N(
+}), _e = N(
   ({ className: a, size: t, label: r, ...n }, s) => /* @__PURE__ */ i(
     "div",
     {
@@ -231,15 +231,15 @@ const Pe = P("animate-spin text-[var(--brand-primary)]", {
       className: o("inline-flex items-center justify-center", a),
       ...n,
       children: [
-        /* @__PURE__ */ e(V, { className: o(Pe({ size: t })) }),
+        /* @__PURE__ */ e(V, { className: o(Le({ size: t })) }),
         /* @__PURE__ */ e("span", { className: "sr-only", children: r || "Loading" })
       ]
     }
   )
 );
-Ae.displayName = "Spinner";
-const De = N(
-  ({ className: a, orientation: t = "horizontal", variant: r = "solid", text: n, ...s }, d) => {
+_e.displayName = "Spinner";
+const Pe = N(
+  ({ className: a, orientation: t = "horizontal", variant: r = "solid", text: n, ...s }, c) => {
     const l = {
       solid: "border-solid",
       dashed: "border-dashed",
@@ -249,7 +249,7 @@ const De = N(
       /* @__PURE__ */ e(
         "hr",
         {
-          ref: d,
+          ref: c,
           className: o(
             "flex-1 border-[var(--border)]",
             l[r]
@@ -270,7 +270,7 @@ const De = N(
     ] }) : /* @__PURE__ */ e(
       "hr",
       {
-        ref: d,
+        ref: c,
         role: "separator",
         "aria-orientation": t,
         className: o(
@@ -284,15 +284,15 @@ const De = N(
     );
   }
 );
-De.displayName = "Divider";
-const $ = N(
+Pe.displayName = "Divider";
+const T = N(
   ({
     className: a,
     value: t = 0,
     maxRating: r = 5,
     size: n = "md",
     readonly: s = !1,
-    onChange: d,
+    onChange: c,
     showValue: l = !1,
     ...m
   }, f) => {
@@ -301,7 +301,7 @@ const $ = N(
       md: "h-5 w-5",
       lg: "h-6 w-6"
     }, b = (x) => {
-      !s && d && d(x);
+      !s && c && c(x);
     }, h = u || t;
     return /* @__PURE__ */ i(
       "div",
@@ -312,8 +312,8 @@ const $ = N(
         "aria-label": `Rating: ${t} out of ${r}`,
         ...m,
         children: [
-          /* @__PURE__ */ e("div", { className: "flex items-center gap-0.5", children: Array.from({ length: r }, (x, c) => c + 1).map((x) => {
-            const c = x <= h;
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-0.5", children: Array.from({ length: r }, (x, d) => d + 1).map((x) => {
+            const d = x <= h;
             return /* @__PURE__ */ e(
               "button",
               {
@@ -333,7 +333,7 @@ const $ = N(
                     className: o(
                       g[n],
                       "transition-all",
-                      c ? "fill-[var(--warning)] text-[var(--warning)]" : "fill-none text-[var(--muted-foreground)]"
+                      d ? "fill-[var(--warning)] text-[var(--warning)]" : "fill-none text-[var(--muted-foreground)]"
                     )
                   }
                 )
@@ -347,7 +347,7 @@ const $ = N(
     );
   }
 );
-$.displayName = "Rating";
+T.displayName = "Rating";
 function kt({ className: a, type: t, ...r }) {
   return /* @__PURE__ */ e(
     "input",
@@ -392,7 +392,7 @@ function St({
       ...n,
       children: [
         r,
-        /* @__PURE__ */ e(z.Icon, { asChild: !0, children: /* @__PURE__ */ e(E, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ e(z.Icon, { asChild: !0, children: /* @__PURE__ */ e(A, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -415,7 +415,7 @@ function It({
       position: r,
       ...n,
       children: [
-        /* @__PURE__ */ e(Ee, {}),
+        /* @__PURE__ */ e(Ae, {}),
         /* @__PURE__ */ e(
           z.Viewport,
           {
@@ -426,7 +426,7 @@ function It({
             children: t
           }
         ),
-        /* @__PURE__ */ e(Le, {})
+        /* @__PURE__ */ e(Re, {})
       ]
     }
   ) });
@@ -452,7 +452,7 @@ function jt({
     }
   );
 }
-function Ee({
+function Ae({
   className: a,
   ...t
 }) {
@@ -469,7 +469,7 @@ function Ee({
     }
   );
 }
-function Le({
+function Re({
   className: a,
   ...t
 }) {
@@ -482,7 +482,7 @@ function Le({
         a
       ),
       ...t,
-      children: /* @__PURE__ */ e(E, { className: "size-4" })
+      children: /* @__PURE__ */ e(A, { className: "size-4" })
     }
   );
 }
@@ -510,12 +510,12 @@ function Mt({
     }
   );
 }
-function _t({
+function Dt({
   className: a,
   ...t
 }) {
   return /* @__PURE__ */ e(
-    T.Root,
+    E.Root,
     {
       "data-slot": "radio-group",
       className: o("grid gap-3", a),
@@ -523,12 +523,12 @@ function _t({
     }
   );
 }
-function Pt({
+function Lt({
   className: a,
   ...t
 }) {
   return /* @__PURE__ */ e(
-    T.Item,
+    E.Item,
     {
       "data-slot": "radio-group-item",
       className: o(
@@ -537,7 +537,7 @@ function Pt({
       ),
       ...t,
       children: /* @__PURE__ */ e(
-        T.Indicator,
+        E.Indicator,
         {
           "data-slot": "radio-group-indicator",
           className: "relative flex items-center justify-center",
@@ -547,7 +547,7 @@ function Pt({
     }
   );
 }
-function At({
+function _t({
   className: a,
   ...t
 }) {
@@ -579,14 +579,14 @@ 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 R = N(
+const $ = N(
   ({
     className: a,
     image: t,
     title: r,
     author: n,
     price: s,
-    originalPrice: d,
+    originalPrice: c,
     rating: l,
     reviewCount: m,
     badge: f,
@@ -596,7 +596,7 @@ const R = N(
     onAddToCart: b,
     onToggleFavorite: h,
     isFavorite: x = !1,
-    href: c,
+    href: d,
     orientation: p = "vertical",
     ...y
   }, j) => v ? /* @__PURE__ */ i(
@@ -640,30 +640,30 @@ const R = N(
         /* @__PURE__ */ e(
           H,
           {
-            href: c,
+            href: d,
             className: "block h-24 w-20 shrink-0 overflow-hidden rounded-lg",
             children: /* @__PURE__ */ e(
               "img",
               {
                 src: t,
                 alt: r,
-                className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                className: "h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
               }
             )
           }
         ),
         /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-          c ? /* @__PURE__ */ e(
+          d ? /* @__PURE__ */ e(
             "a",
             {
-              href: c,
+              href: d,
               className: "line-clamp-2 text-sm 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",
               children: r
             }
           ) : /* @__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($, { value: l, size: "sm", readonly: !0 }),
+            /* @__PURE__ */ e(T, { value: l, size: "sm", readonly: !0 }),
             m !== void 0 && /* @__PURE__ */ i("span", { className: "text-xs text-[var(--muted-foreground)]", children: [
               "(",
               m,
@@ -673,11 +673,11 @@ const R = N(
           /* @__PURE__ */ i("div", { className: "flex items-baseline gap-2", children: [
             /* @__PURE__ */ i("span", { className: "text-base font-bold text-[var(--foreground)]", children: [
               "R$ ",
-              s.toFixed(2)
+              s.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
             ] }),
-            d && d > s && /* @__PURE__ */ i("span", { className: "text-xs text-[var(--muted-foreground)] line-through", children: [
+            c && c > s && /* @__PURE__ */ i("span", { className: "text-xs text-[var(--muted-foreground)] line-through", children: [
               "R$ ",
-              d.toFixed(2)
+              c.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
             ] })
           ] }),
           b && /* @__PURE__ */ e(
@@ -688,7 +688,7 @@ const R = N(
               variant: "primary",
               size: "sm",
               fullWidth: !0,
-              leftIcon: /* @__PURE__ */ e(L, { className: "h-3.5 w-3.5" }),
+              leftIcon: /* @__PURE__ */ e(R, { className: "h-3.5 w-3.5" }),
               className: "mt-auto",
               children: g ? "Indisponível" : "Adicionar"
             }
@@ -710,7 +710,7 @@ const R = N(
         /* @__PURE__ */ i(
           H,
           {
-            href: c,
+            href: d,
             className: "relative block aspect-[3/4] w-full overflow-hidden rounded-t-lg",
             children: [
               /* @__PURE__ */ e(
@@ -718,11 +718,11 @@ const R = N(
                 {
                   src: t,
                   alt: r,
-                  className: "h-full w-full object-cover transition-transform group-hover:scale-105"
+                  className: "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(D, { variant: u, children: f }) }),
-              g && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ e(D, { variant: "danger", size: "lg", children: "Esgotado" }) })
+              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" }) })
             ]
           }
         ),
@@ -744,17 +744,17 @@ const R = N(
           }
         ),
         /* @__PURE__ */ i("div", { className: "flex flex-1 flex-col p-4", children: [
-          c ? /* @__PURE__ */ e(
+          d ? /* @__PURE__ */ e(
             "a",
             {
-              href: c,
+              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",
               children: r
             }
           ) : /* @__PURE__ */ e("h3", { className: "line-clamp-2 text-base font-medium text-[var(--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($, { value: l, size: "sm", readonly: !0 }),
+            /* @__PURE__ */ e(T, { value: l, size: "sm", readonly: !0 }),
             m !== void 0 && /* @__PURE__ */ i("span", { className: "text-sm text-[var(--muted-foreground)]", children: [
               "(",
               m,
@@ -764,11 +764,11 @@ const R = N(
           /* @__PURE__ */ i("div", { className: "mt-3 flex items-baseline gap-2", children: [
             /* @__PURE__ */ i("span", { className: "text-xl font-bold text-[var(--foreground)]", children: [
               "R$ ",
-              s.toFixed(2)
+              s.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
             ] }),
-            d && d > s && /* @__PURE__ */ i("span", { className: "text-sm text-[var(--muted-foreground)] line-through", children: [
+            c && c > s && /* @__PURE__ */ i("span", { className: "text-sm text-[var(--muted-foreground)] line-through", children: [
               "R$ ",
-              d.toFixed(2)
+              c.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
             ] })
           ] }),
           b && /* @__PURE__ */ e(
@@ -779,7 +779,7 @@ const R = N(
               variant: "primary",
               size: "md",
               fullWidth: !0,
-              leftIcon: /* @__PURE__ */ e(L, { className: "h-4 w-4" }),
+              leftIcon: /* @__PURE__ */ e(R, { className: "h-4 w-4" }),
               className: o(
                 "mt-4 transition-all duration-200",
                 "opacity-0 translate-y-2",
@@ -794,15 +794,15 @@ const R = N(
     }
   )
 );
-R.displayName = "ProductCard";
-const Te = N(
+$.displayName = "ProductCard";
+const Ee = N(
   ({
     className: a,
     onSearch: t,
     onClear: r,
     isLoading: n = !1,
     size: s = "md",
-    placeholder: d = "Buscar...",
+    placeholder: c = "Buscar...",
     value: l,
     onChange: m,
     ...f
@@ -814,7 +814,7 @@ const Te = N(
     }, x = (y) => {
       const j = y.target.value;
       l === void 0 && g(j), m == null || m(y);
-    }, c = () => {
+    }, d = () => {
       l === void 0 && g(""), r == null || r();
     }, p = (y) => {
       y.key === "Enter" && t && t(b);
@@ -829,7 +829,7 @@ const Te = N(
           value: b,
           onChange: x,
           onKeyDown: p,
-          placeholder: d,
+          placeholder: c,
           className: o(
             "w-full rounded-lg border-2 border-[var(--border)] bg-[var(--input-background)] pl-10 pr-10 font-normal transition-colors",
             "placeholder:text-[var(--muted-foreground)]",
@@ -846,7 +846,7 @@ const Te = N(
           "button",
           {
             type: "button",
-            onClick: c,
+            onClick: d,
             className: "rounded-full p-1 hover:bg-[var(--muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
             "aria-label": "Clear search",
             children: /* @__PURE__ */ e(ie, { className: "h-4 w-4 text-[var(--muted-foreground)]" })
@@ -856,15 +856,15 @@ const Te = N(
     ] }) });
   }
 );
-Te.displayName = "SearchBar";
-const $e = N(
+Ee.displayName = "SearchBar";
+const Te = N(
   ({
     className: a,
     price: t,
     originalPrice: r,
     currency: n = "R$",
     size: s = "md",
-    showDiscount: d = !0,
+    showDiscount: c = !0,
     installments: l,
     ...m
   }, f) => {
@@ -902,7 +902,7 @@ const $e = N(
             }
           )
         ] }),
-        d && u > 0 && /* @__PURE__ */ i(D, { variant: "success", size: "sm", children: [
+        c && u > 0 && /* @__PURE__ */ i(P, { variant: "success", size: "sm", children: [
           "-",
           u,
           "%"
@@ -920,15 +920,15 @@ const $e = N(
     ] });
   }
 );
-$e.displayName = "PriceDisplay";
-const Re = N(
+Te.displayName = "PriceDisplay";
+const $e = N(
   ({
     className: a,
     value: t,
     min: r = 1,
     max: n = 99,
     onChange: s,
-    size: d = "md",
+    size: c = "md",
     disabled: l = !1,
     showLabel: m = !1,
     ...f
@@ -937,8 +937,8 @@ const Re = N(
       t < n && s(t + 1);
     }, g = () => {
       t > r && s(t - 1);
-    }, b = (c) => {
-      const p = parseInt(c.target.value);
+    }, b = (d) => {
+      const p = parseInt(d.target.value);
       !isNaN(p) && p >= r && p <= n && s(p);
     }, h = {
       sm: "h-8 w-8",
@@ -960,7 +960,7 @@ const Re = N(
             size: "sm",
             onClick: g,
             disabled: l || t <= r,
-            className: o(h[d], "p-0"),
+            className: o(h[c], "p-0"),
             "aria-label": "Decrease quantity",
             children: /* @__PURE__ */ e(ne, { className: "h-4 w-4" })
           }
@@ -979,7 +979,7 @@ const Re = N(
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
               "disabled:cursor-not-allowed disabled:opacity-50",
               "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-              x[d]
+              x[c]
             ),
             "aria-label": "Quantity"
           }
@@ -992,7 +992,7 @@ const Re = N(
             size: "sm",
             onClick: v,
             disabled: l || t >= n,
-            className: o(h[d], "p-0"),
+            className: o(h[c], "p-0"),
             "aria-label": "Increase quantity",
             children: /* @__PURE__ */ e(se, { className: "h-4 w-4" })
           }
@@ -1001,9 +1001,9 @@ const Re = N(
     ] });
   }
 );
-Re.displayName = "QuantitySelector";
+$e.displayName = "QuantitySelector";
 const Be = N(
-  ({ className: a, label: t, htmlFor: r, required: n, error: s, helperText: d, children: l, ...m }, f) => /* @__PURE__ */ i("div", { ref: f, className: o("flex flex-col gap-1.5", a), ...m, children: [
+  ({ 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(
       "label",
       {
@@ -1016,23 +1016,23 @@ const Be = N(
       }
     ),
     l,
-    (s || d) && /* @__PURE__ */ e(
+    (s || c) && /* @__PURE__ */ e(
       "p",
       {
         className: o(
           "text-sm",
           s ? "text-[var(--destructive)]" : "text-[var(--muted-foreground)]"
         ),
-        children: s || d
+        children: s || c
       }
     )
   ] })
 );
 Be.displayName = "FormGroup";
-function Dt({ ...a }) {
+function Pt({ ...a }) {
   return /* @__PURE__ */ e("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...a });
 }
-function Et({ className: a, ...t }) {
+function At({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "ol",
     {
@@ -1045,7 +1045,7 @@ function Et({ className: a, ...t }) {
     }
   );
 }
-function Lt({ className: a, ...t }) {
+function Rt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "li",
     {
@@ -1055,7 +1055,7 @@ function Lt({ className: a, ...t }) {
     }
   );
 }
-function Tt({
+function Et({
   asChild: a,
   className: t,
   ...r
@@ -1069,7 +1069,7 @@ function Tt({
     }
   );
 }
-function $t({ className: a, ...t }) {
+function Tt({ className: a, ...t }) {
   return /* @__PURE__ */ e(
     "span",
     {
@@ -1082,7 +1082,7 @@ function $t({ className: a, ...t }) {
     }
   );
 }
-function Rt({
+function $t({
   children: a,
   className: t,
   ...r
@@ -1102,14 +1102,14 @@ function Rt({
 function Bt({
   ...a
 }) {
-  return /* @__PURE__ */ e(_.Root, { "data-slot": "accordion", ...a });
+  return /* @__PURE__ */ e(D.Root, { "data-slot": "accordion", ...a });
 }
 function Vt({
   className: a,
   ...t
 }) {
   return /* @__PURE__ */ e(
-    _.Item,
+    D.Item,
     {
       "data-slot": "accordion-item",
       className: o("border-b last:border-b-0", a),
@@ -1122,8 +1122,8 @@ function Ft({
   children: t,
   ...r
 }) {
-  return /* @__PURE__ */ e(_.Header, { className: "flex", children: /* @__PURE__ */ i(
-    _.Trigger,
+  return /* @__PURE__ */ e(D.Header, { className: "flex", children: /* @__PURE__ */ i(
+    D.Trigger,
     {
       "data-slot": "accordion-trigger",
       className: o(
@@ -1133,7 +1133,7 @@ function Ft({
       ...r,
       children: [
         t,
-        /* @__PURE__ */ e(E, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ e(A, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
       ]
     }
   ) });
@@ -1144,7 +1144,7 @@ function qt({
   ...r
 }) {
   return /* @__PURE__ */ e(
-    _.Content,
+    D.Content,
     {
       "data-slot": "accordion-content",
       className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
@@ -1206,7 +1206,7 @@ const Fe = N(
     title: r,
     subtitle: n,
     description: s,
-    primaryCTA: d,
+    primaryCTA: c,
     secondaryCTA: l,
     backgroundImage: m,
     overlay: f = !0,
@@ -1227,7 +1227,7 @@ const Fe = N(
       ),
       ...v,
       children: [
-        m && /* @__PURE__ */ i(A, { children: [
+        m && /* @__PURE__ */ i(_, { children: [
           /* @__PURE__ */ e(
             "div",
             {
@@ -1276,14 +1276,14 @@ const Fe = N(
                     children: s
                   }
                 ),
-                (d || l) && /* @__PURE__ */ i("div", { className: "mt-8 flex flex-wrap gap-4", children: [
-                  d && /* @__PURE__ */ e(
+                (c || l) && /* @__PURE__ */ i("div", { className: "mt-8 flex flex-wrap gap-4", children: [
+                  c && /* @__PURE__ */ e(
                     C,
                     {
                       size: "lg",
-                      onClick: d.onClick,
+                      onClick: c.onClick,
                       variant: "primary",
-                      children: d.label
+                      children: c.label
                     }
                   ),
                   l && /* @__PURE__ */ e(
@@ -1314,13 +1314,13 @@ const X = N(
     icon: r,
     title: n,
     description: s,
-    action: d,
+    action: c,
     ...l
   }, m) => {
     const u = r || {
       default: /* @__PURE__ */ e(de, { className: "h-16 w-16" }),
       search: /* @__PURE__ */ e(Q, { className: "h-16 w-16" }),
-      cart: /* @__PURE__ */ e(L, { className: "h-16 w-16" }),
+      cart: /* @__PURE__ */ e(R, { className: "h-16 w-16" }),
       error: /* @__PURE__ */ e(le, { className: "h-16 w-16" })
     }[t];
     return /* @__PURE__ */ i(
@@ -1336,14 +1336,14 @@ const X = N(
           /* @__PURE__ */ e("div", { className: "rounded-full bg-[var(--muted)] p-6 text-[var(--muted-foreground)]", children: u }),
           /* @__PURE__ */ e("h3", { className: "mt-6 text-xl font-semibold text-[var(--foreground)]", children: n }),
           s && /* @__PURE__ */ e("p", { className: "mt-2 max-w-md text-[var(--muted-foreground)]", children: s }),
-          d && /* @__PURE__ */ e(
+          c && /* @__PURE__ */ e(
             C,
             {
-              onClick: d.onClick,
+              onClick: c.onClick,
               variant: "primary",
               size: "lg",
               className: "mt-6",
-              children: d.label
+              children: c.label
             }
           )
         ]
@@ -1359,7 +1359,7 @@ const qe = N(
     title: r,
     message: n,
     onRetry: s,
-    onGoHome: d,
+    onGoHome: c,
     showRetry: l = !0,
     showHome: m = !0,
     ...f
@@ -1415,10 +1415,10 @@ const qe = N(
                 children: "Tentar novamente"
               }
             ),
-            m && d && /* @__PURE__ */ e(
+            m && c && /* @__PURE__ */ e(
               C,
               {
-                onClick: d,
+                onClick: c,
                 variant: "secondary",
                 size: "lg",
                 leftIcon: /* @__PURE__ */ e(me, { className: "h-5 w-5" }),
@@ -1439,7 +1439,7 @@ const He = N(
     columns: r = 4,
     gap: n = "md",
     isLoading: s = !1,
-    skeletonCount: d = 8,
+    skeletonCount: c = 8,
     emptyStateMessage: l = "Nenhum produto encontrado",
     onEmptyAction: m,
     ...f
@@ -1465,8 +1465,8 @@ const He = N(
           a
         ),
         ...f,
-        children: Array.from({ length: d }).map((b, h) => /* @__PURE__ */ e(
-          R,
+        children: Array.from({ length: c }).map((b, h) => /* @__PURE__ */ e(
+          $,
           {
             image: "",
             title: "",
@@ -1498,7 +1498,7 @@ const He = N(
           a
         ),
         ...f,
-        children: t.map((b, h) => /* @__PURE__ */ e(R, { ...b }, h))
+        children: t.map((b, h) => /* @__PURE__ */ e($, { ...b }, h))
       }
     );
   }
@@ -1724,7 +1724,7 @@ function ea({
   );
 }
 const et = N(
-  ({ className: a, onThemeChange: t, onFontSizeChange: r, showA11yLink: n = !1, ...s }, d) => {
+  ({ className: a, onThemeChange: t, onFontSizeChange: r, showA11yLink: n = !1, ...s }, c) => {
     const [l, m] = k("light"), [f, u] = k(16), [v, g] = k(!1);
     M(() => {
       const p = localStorage.getItem("a11y-theme") ?? document.documentElement.getAttribute("data-theme") ?? "light";
@@ -1740,19 +1740,19 @@ const et = N(
       }
     }, [v]);
     const b = () => {
-      const c = l === "light" ? "dark" : "light";
-      m(c), document.documentElement.setAttribute("data-theme", c), localStorage.setItem("a11y-theme", c), t == null || t(c);
+      const d = l === "light" ? "dark" : "light";
+      m(d), document.documentElement.setAttribute("data-theme", d), localStorage.setItem("a11y-theme", d), t == null || t(d);
     }, h = () => {
-      const c = Math.min(f + 2, 24);
-      u(c), document.documentElement.style.setProperty("--font-size", `${c}px`), document.documentElement.style.fontSize = `${c}px`, localStorage.setItem("a11y-font-size", c.toString()), r == null || r(c);
+      const d = Math.min(f + 2, 24);
+      u(d), document.documentElement.style.setProperty("--font-size", `${d}px`), document.documentElement.style.fontSize = `${d}px`, localStorage.setItem("a11y-font-size", d.toString()), r == null || r(d);
     }, x = () => {
-      const c = Math.max(f - 2, 12);
-      u(c), document.documentElement.style.setProperty("--font-size", `${c}px`), document.documentElement.style.fontSize = `${c}px`, localStorage.setItem("a11y-font-size", c.toString()), r == null || r(c);
+      const d = Math.max(f - 2, 12);
+      u(d), document.documentElement.style.setProperty("--font-size", `${d}px`), document.documentElement.style.fontSize = `${d}px`, localStorage.setItem("a11y-font-size", d.toString()), r == null || r(d);
     };
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: d,
+        ref: c,
         className: o(
           "w-full border-b border-[var(--border)] bg-[var(--card)] sticky top-0 z-50",
           a
@@ -1824,7 +1824,7 @@ const et = N(
               "button",
               {
                 type: "button",
-                onClick: () => g((c) => !c),
+                onClick: () => g((d) => !d),
                 "aria-label": "Ativar VLibras",
                 "aria-pressed": v,
                 className: o(
@@ -1853,24 +1853,24 @@ const tt = N(
     autoplayDelay: r = 5e3,
     autoplay: n = !0,
     ...s
-  }, d) => {
+  }, c) => {
     const [l, m] = k(0), [f, u] = k(!1), [v, g] = k(!1);
     M(() => {
-      const c = window.matchMedia("(prefers-reduced-motion: reduce)");
-      g(c.matches);
+      const d = window.matchMedia("(prefers-reduced-motion: reduce)");
+      g(d.matches);
       const p = (y) => {
         g(y.matches);
       };
-      return c.addEventListener("change", p), () => c.removeEventListener("change", p);
+      return d.addEventListener("change", p), () => d.removeEventListener("change", p);
     }, []), M(() => {
       if (!n || f || v) return;
-      const c = setInterval(() => {
+      const d = setInterval(() => {
         m((p) => (p + 1) % t.length);
       }, r);
-      return () => clearInterval(c);
+      return () => clearInterval(d);
     }, [n, r, t.length, f, v]);
-    const b = (c) => {
-      m(c), u(!0), setTimeout(() => u(!1), r);
+    const b = (d) => {
+      m(d), u(!0), setTimeout(() => u(!1), r);
     }, h = () => {
       b((l - 1 + t.length) % t.length);
     }, x = () => {
@@ -1879,13 +1879,13 @@ const tt = N(
     return t.length === 0 ? null : (t[l], /* @__PURE__ */ i(
       "div",
       {
-        ref: d,
+        ref: c,
         className: o("relative w-full overflow-hidden", a),
         onMouseEnter: () => u(!0),
         onMouseLeave: () => u(!1),
         ...s,
         children: [
-          /* @__PURE__ */ e("div", { className: "relative", children: t.map((c, p) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "relative", children: t.map((d, p) => /* @__PURE__ */ i(
             "div",
             {
               className: o(
@@ -1893,36 +1893,50 @@ const tt = N(
                 p === l ? "block" : "hidden"
               ),
               "aria-hidden": p !== l,
-              children: /* @__PURE__ */ i("picture", { children: [
-                /* @__PURE__ */ e(
-                  "source",
-                  {
-                    media: "(min-width: 1024px)",
-                    srcSet: `${c.imageDesktop} 1x, ${c.imageDesktop.replace(/\.(jpg|png)$/, "@2x.$1")} 2x`
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  "source",
-                  {
-                    media: "(min-width: 768px)",
-                    srcSet: `${c.imageTablet} 1x, ${c.imageTablet.replace(/\.(jpg|png)$/, "@2x.$1")} 2x`
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  "img",
-                  {
-                    src: c.imageMobile,
-                    srcSet: `${c.imageMobile} 1x, ${c.imageMobile.replace(/\.(jpg|png)$/, "@2x.$1")} 2x`,
-                    alt: c.title,
-                    className: "w-full object-cover aspect-[5/6] md:aspect-video lg:aspect-[1920/700]",
-                    loading: p === 0 ? "eager" : "lazy"
-                  }
-                )
-              ] })
+              children: [
+                /* @__PURE__ */ i("picture", { children: [
+                  /* @__PURE__ */ e(
+                    "source",
+                    {
+                      media: "(min-width: 1024px)",
+                      srcSet: `${d.imageDesktop} 1x, ${d.imageDesktop.replace(/\.(jpg|png)$/, "@2x.$1")} 2x`
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "source",
+                    {
+                      media: "(min-width: 768px)",
+                      srcSet: `${d.imageTablet} 1x, ${d.imageTablet.replace(/\.(jpg|png)$/, "@2x.$1")} 2x`
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "img",
+                    {
+                      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]",
+                      loading: p === 0 ? "eager" : "lazy"
+                    }
+                  )
+                ] }),
+                d.showOverlay && /* @__PURE__ */ i("div", { className: "absolute inset-0 flex flex-col justify-end bg-linear-to-t from-black/60 to-transparent p-6 md:p-10", children: [
+                  /* @__PURE__ */ e("h2", { className: "text-2xl font-bold text-white md:text-3xl", children: d.title }),
+                  d.description && /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-gray-200 md:text-base", children: d.description }),
+                  d.cta && /* @__PURE__ */ e(
+                    "a",
+                    {
+                      href: d.cta.href,
+                      className: "mt-4 inline-block self-start rounded-md bg-brand-primary px-5 py-2 text-sm font-semibold text-white transition hover:opacity-90",
+                      children: d.cta.label
+                    }
+                  )
+                ] })
+              ]
             },
-            c.id
+            d.id
           )) }),
-          t.length > 1 && /* @__PURE__ */ i(A, { children: [
+          t.length > 1 && /* @__PURE__ */ i(_, { children: [
             /* @__PURE__ */ e(
               "button",
               {
@@ -1942,7 +1956,7 @@ const tt = N(
               }
             )
           ] }),
-          t.length > 1 && /* @__PURE__ */ e("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: t.map((c, p) => /* @__PURE__ */ e(
+          t.length > 1 && /* @__PURE__ */ e("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: t.map((d, p) => /* @__PURE__ */ e(
             "button",
             {
               onClick: () => b(p),
@@ -2013,7 +2027,7 @@ function G({
     }
   );
 }
-const ot = P(
+const ot = L(
   "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function it({
@@ -2031,7 +2045,7 @@ function it({
         t,
         " ",
         /* @__PURE__ */ e(
-          E,
+          A,
           {
             className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
@@ -2131,9 +2145,9 @@ function lt({ items: a }) {
   ) });
 }
 function Y({ item: a, depth: t = 0 }) {
-  var d;
+  var c;
   const [r, n] = k(!1);
-  return !((d = a.children) != null && d.length) ? /* @__PURE__ */ e(Ke, { asChild: !0, children: /* @__PURE__ */ e(
+  return !((c = a.children) != null && c.length) ? /* @__PURE__ */ e(Ke, { asChild: !0, children: /* @__PURE__ */ e(
     "a",
     {
       href: a.href ?? "#",
@@ -2181,13 +2195,13 @@ function Y({ item: a, depth: t = 0 }) {
   ] });
 }
 const dt = N(
-  ({ items: a, logo: t, rightSlot: r, searchSlot: n, drawerFooter: s, className: d, ...l }, m) => /* @__PURE__ */ e(
+  ({ items: a, logo: t, rightSlot: r, searchSlot: n, drawerFooter: s, className: c, ...l }, m) => /* @__PURE__ */ e(
     "header",
     {
       ref: m,
       className: o(
         "sticky top-0 z-40 border-b border-[var(--border)] bg-[var(--card)]",
-        d
+        c
       ),
       ...l,
       children: /* @__PURE__ */ i("div", { className: "px-4", children: [
@@ -2369,12 +2383,12 @@ function ft({ title: a, links: t }) {
   ] });
 }
 const gt = ({ brand: a = "elo-editora", onNewsletterSubmit: t, className: r, ...n }) => {
-  const [s, d] = k("light");
+  const [s, c] = k("light");
   M(() => {
     const u = document.documentElement;
-    d(u.getAttribute("data-theme") ?? "light");
+    c(u.getAttribute("data-theme") ?? "light");
     const v = new MutationObserver(() => {
-      d(u.getAttribute("data-theme") ?? "light");
+      c(u.getAttribute("data-theme") ?? "light");
     });
     return v.observe(u, { attributes: !0, attributeFilter: ["data-theme"] }), () => v.disconnect();
   }, []);
@@ -2479,14 +2493,14 @@ export {
   qt as AccordionContent,
   Vt as AccordionItem,
   Ft as AccordionTrigger,
-  _e as Avatar,
-  D as Badge,
-  Dt as Breadcrumb,
-  Lt as BreadcrumbItem,
-  Tt as BreadcrumbLink,
-  Et as BreadcrumbList,
-  $t as BreadcrumbPage,
-  Rt as BreadcrumbSeparator,
+  De as Avatar,
+  P as Badge,
+  Pt as Breadcrumb,
+  Rt as BreadcrumbItem,
+  Et as BreadcrumbLink,
+  At as BreadcrumbList,
+  Tt as BreadcrumbPage,
+  $t as BreadcrumbSeparator,
   C as Button,
   Mt as Checkbox,
   ra as Col,
@@ -2497,7 +2511,7 @@ export {
   Ot as DialogHeader,
   Yt as DialogTitle,
   Wt as DialogTrigger,
-  De as Divider,
+  Pe as Divider,
   Qe as Drawer,
   X as EmptyState,
   qe as ErrorState,
@@ -2509,15 +2523,15 @@ export {
   kt as Input,
   dt as MegaMenu,
   Qt as Modal,
-  $e as PriceDisplay,
-  R as ProductCard,
+  Te as PriceDisplay,
+  $ as ProductCard,
   He as ProductGrid,
   la as ProgressBar,
-  Re as QuantitySelector,
-  _t as RadioGroup,
-  Pt as RadioGroupItem,
-  $ as Rating,
-  Te as SearchBar,
+  $e as QuantitySelector,
+  Dt as RadioGroup,
+  Lt as RadioGroupItem,
+  T as Rating,
+  Ee as SearchBar,
   zt as Select,
   It as SelectContent,
   jt as SelectItem,
@@ -2529,9 +2543,9 @@ export {
   Ze as SheetHeader,
   Je as SheetTitle,
   We as SheetTrigger,
-  Ae as Spinner,
+  _e as Spinner,
   Ie as Textarea,
-  At as Toggle,
+  _t as Toggle,
   Ht as Tooltip,
   Ut as TooltipContent,
   Ve as TooltipProvider,
@@ -2541,7 +2555,7 @@ export {
   je as badgeVariants,
   Se as buttonVariants,
   o as cn,
-  Pe as spinnerVariants,
+  Le as spinnerVariants,
   na as toast
 };
 //# sourceMappingURL=index.js.map