@thorprovider/blocks 2.0.0 → 3.0.1

package/dist/blocks/e-commerce/product-list/product-showcase-1.js

@@ -0,0 +1,245 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var product_showcase_1_exports = {};
+__export(product_showcase_1_exports, {
+  ProductShowcase1: () => ProductShowcase1,
+  default: () => product_showcase_1_default
+});
+module.exports = __toCommonJS(product_showcase_1_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_react2 = require("motion/react");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_money = require("../../../lib/money.js");
+const DEFAULT_PAGE_SIZE = 6;
+const SWIPE_THRESHOLD = 48;
+function chunk(items, size) {
+  const pages = [];
+  for (let index = 0; index < items.length; index += size) {
+    pages.push(items.slice(index, index + size));
+  }
+  return pages;
+}
+function compareAtText(product) {
+  const compareAt = product.compareAtPrice;
+  if (!compareAt) return void 0;
+  const formatted = (0, import_money.formatMoney)(compareAt);
+  const price = (0, import_money.formatMoney)(product.price);
+  if (!formatted || !price) return void 0;
+  if (Number(compareAt.amount) <= Number(product.price.amount)) return void 0;
+  return formatted;
+}
+function ProductShowcase1({
+  products,
+  heading,
+  description,
+  pageSize = DEFAULT_PAGE_SIZE,
+  prevLabel = "Anterior",
+  nextLabel = "Siguiente",
+  pageLabel = "P\xE1gina",
+  unavailablePriceLabel = "Precio no disponible",
+  emptyLabel = "No hay productos para mostrar.",
+  addToCartLabel = "Agregar al carrito",
+  onAddToCart,
+  onProductClick
+}) {
+  const reduceMotion = (0, import_react2.useReducedMotion)();
+  const size = Number.isInteger(pageSize) && pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE;
+  const pages = (0, import_react.useMemo)(() => chunk(products, size), [products, size]);
+  const pageCount = pages.length;
+  const [page, setPage] = (0, import_react.useState)(0);
+  const [touchStart, setTouchStart] = (0, import_react.useState)(null);
+  const safePage = pageCount === 0 ? 0 : Math.min(page, pageCount - 1);
+  const goTo = (next) => {
+    if (pageCount === 0) return;
+    if (next < 0 || next >= pageCount) return;
+    setPage(next);
+  };
+  if (pageCount === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: "py-12", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+      heading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "mb-4 text-center text-2xl font-bold text-balance md:text-3xl", children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-center", children: emptyLabel })
+    ] }) });
+  }
+  const visible = pages[safePage];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "section",
+    {
+      className: "py-12",
+      "aria-roledescription": "carousel",
+      onKeyDown: (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          goTo(safePage - 1);
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          goTo(safePage + 1);
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+        (heading || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-8 text-center", children: [
+          heading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-2xl font-bold text-balance md:text-3xl", children: heading }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-2 text-balance", children: description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            onTouchStart: (event) => setTouchStart(event.touches[0]?.clientX ?? null),
+            onTouchEnd: (event) => {
+              if (touchStart === null) return;
+              const delta = (event.changedTouches[0]?.clientX ?? touchStart) - touchStart;
+              if (delta <= -SWIPE_THRESHOLD) goTo(safePage + 1);
+              else if (delta >= SWIPE_THRESHOLD) goTo(safePage - 1);
+              setTouchStart(null);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react2.motion.div,
+              {
+                initial: reduceMotion ? false : { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { duration: 0.3, ease: "easeOut" },
+                className: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6",
+                children: visible.map((product) => {
+                  const compareAt = compareAtText(product);
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_card.Card,
+                    {
+                      className: `flex h-full flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md ${onProductClick ? "cursor-pointer" : ""}`,
+                      onClick: onProductClick ? () => onProductClick(product) : void 0,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "flex flex-1 flex-col gap-4 px-4", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-square overflow-hidden rounded-md", children: [
+                            product.badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bg-destructive text-destructive-foreground absolute top-2 left-2 z-10 rounded-full px-2 py-0.5 text-xs font-semibold", children: product.badge }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "img",
+                              {
+                                src: product.image || void 0,
+                                alt: product.imageAlt ?? product.title,
+                                className: "size-full rounded-md object-contain",
+                                loading: "lazy",
+                                width: 400,
+                                height: 400
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-1 flex-col", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "mb-1 font-medium text-balance", children: onProductClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: (event) => {
+                                  event.stopPropagation();
+                                  onProductClick(product);
+                                },
+                                className: "hover:text-primary cursor-pointer text-left transition-colors",
+                                children: product.title
+                              }
+                            ) : product.title }),
+                            typeof product.rating === "number" && Number.isFinite(product.rating) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-muted-foreground mb-1 flex items-center gap-1 text-xs", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Star, { className: "size-3.5 fill-current", "aria-hidden": "true" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: product.rating.toFixed(1) })
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-auto flex items-baseline gap-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-semibold", children: (0, import_money.formatMoney)(product.price) ?? unavailablePriceLabel }),
+                              compareAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm line-through", children: compareAt })
+                            ] })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardFooter, { className: "bg-transparent border-t-0 px-3 pt-0 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_button.Button,
+                          {
+                            variant: "outline",
+                            size: "sm",
+                            className: "h-8 w-full cursor-pointer px-3 text-sm",
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              onAddToCart?.(product);
+                            },
+                            children: addToCartLabel
+                          }
+                        ) })
+                      ]
+                    },
+                    product.id
+                  );
+                })
+              },
+              safePage
+            )
+          }
+        ),
+        pageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-6 flex items-center justify-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "icon-sm",
+              className: "cursor-pointer",
+              "aria-label": prevLabel,
+              disabled: safePage === 0,
+              onClick: () => goTo(safePage - 1),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: pages.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${pageLabel} ${index + 1}`,
+              "aria-current": index === safePage ? "true" : void 0,
+              className: `size-2 rounded-full transition-colors ${index === safePage ? "bg-primary" : "bg-muted-foreground/40"}`,
+              onClick: () => goTo(index)
+            },
+            index
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "icon-sm",
+              className: "cursor-pointer",
+              "aria-label": nextLabel,
+              disabled: safePage === pageCount - 1,
+              onClick: () => goTo(safePage + 1),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { "aria-live": "polite", className: "sr-only", children: [
+          pageLabel,
+          " ",
+          safePage + 1,
+          " / ",
+          pageCount
+        ] })
+      ] })
+    }
+  );
+}
+var product_showcase_1_default = ProductShowcase1;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProductShowcase1
+});
+//# sourceMappingURL=product-showcase-1.js.map

package/dist/blocks/e-commerce/product-list/product-showcase-1.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-list/product-showcase-1.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { ChevronLeft, ChevronRight, Star } from 'lucide-react'\nimport { motion, useReducedMotion } from 'motion/react'\n\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardFooter } from '../../../ui/card'\nimport { formatMoney } from '../../../lib/money'\nimport type { ProductPresentation } from '../../../lib/contracts'\n\nexport interface ProductShowcase1Props {\n  products: ProductPresentation[]\n  heading?: string\n  description?: string\n  pageSize?: number\n  prevLabel?: string\n  nextLabel?: string\n  /** Label for the current-page status, e.g. \"Página\". */\n  pageLabel?: string\n  unavailablePriceLabel?: string\n  emptyLabel?: string\n  addToCartLabel?: string\n  onAddToCart?: (product: ProductPresentation) => void\n  onProductClick?: (product: ProductPresentation) => void\n}\n\nconst DEFAULT_PAGE_SIZE = 6\nconst SWIPE_THRESHOLD = 48\n\nfunction chunk<T>(items: readonly T[], size: number): T[][] {\n  const pages: T[][] = []\n  for (let index = 0; index < items.length; index += size) {\n    pages.push(items.slice(index, index + size))\n  }\n  return pages\n}\n\nfunction compareAtText(product: ProductPresentation): string | undefined {\n  const compareAt = product.compareAtPrice\n  if (!compareAt) return undefined\n  const formatted = formatMoney(compareAt)\n  const price = formatMoney(product.price)\n  if (!formatted || !price) return undefined\n  if (Number(compareAt.amount) <= Number(product.price.amount)) return undefined\n  return formatted\n}\n\n/**\n * Combined grid-and-carousel product presentation: fixed-size grid pages\n * navigated manually (prev/next) with a visible current-page indication. There\n * is no autoplay, no auto-advance, and no infinite loop. Controls are real\n * buttons (keyboard operable and visible at every breakpoint); touch swipe is an\n * addition, never the only way to navigate. Below-fold images are lazy.\n *\n * Data access lives in the host: this block only renders the props it receives\n * and reports interactions through callbacks (no backend/router/measurement\n * imports).\n */\nexport function ProductShowcase1({\n  products,\n  heading,\n  description,\n  pageSize = DEFAULT_PAGE_SIZE,\n  prevLabel = 'Anterior',\n  nextLabel = 'Siguiente',\n  pageLabel = 'Página',\n  unavailablePriceLabel = 'Precio no disponible',\n  emptyLabel = 'No hay productos para mostrar.',\n  addToCartLabel = 'Agregar al carrito',\n  onAddToCart,\n  onProductClick,\n}: ProductShowcase1Props) {\n  const reduceMotion = useReducedMotion()\n  const size = Number.isInteger(pageSize) && pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE\n  const pages = useMemo(() => chunk(products, size), [products, size])\n  const pageCount = pages.length\n  const [page, setPage] = useState(0)\n  const [touchStart, setTouchStart] = useState<number | null>(null)\n  const safePage = pageCount === 0 ? 0 : Math.min(page, pageCount - 1)\n\n  const goTo = (next: number) => {\n    if (pageCount === 0) return\n    if (next < 0 || next >= pageCount) return\n    setPage(next)\n  }\n\n  if (pageCount === 0) {\n    return (\n      <section className='py-12'>\n        <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n          {heading && (\n            <h2 className='mb-4 text-center text-2xl font-bold text-balance md:text-3xl'>\n              {heading}\n            </h2>\n          )}\n          <p className='text-muted-foreground text-center'>{emptyLabel}</p>\n        </div>\n      </section>\n    )\n  }\n\n  const visible = pages[safePage]\n\n  return (\n    <section\n      className='py-12'\n      aria-roledescription='carousel'\n      onKeyDown={(event) => {\n        if (event.key === 'ArrowLeft') {\n          event.preventDefault()\n          goTo(safePage - 1)\n        } else if (event.key === 'ArrowRight') {\n          event.preventDefault()\n          goTo(safePage + 1)\n        }\n      }}\n    >\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {(heading || description) && (\n          <div className='mb-8 text-center'>\n            {heading && (\n              <h2 className='text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>\n            )}\n            {description && <p className='text-muted-foreground mt-2 text-balance'>{description}</p>}\n          </div>\n        )}\n\n        <div\n          onTouchStart={(event) => setTouchStart(event.touches[0]?.clientX ?? null)}\n          onTouchEnd={(event) => {\n            if (touchStart === null) return\n            const delta = (event.changedTouches[0]?.clientX ?? touchStart) - touchStart\n            if (delta <= -SWIPE_THRESHOLD) goTo(safePage + 1)\n            else if (delta >= SWIPE_THRESHOLD) goTo(safePage - 1)\n            setTouchStart(null)\n          }}\n        >\n          <motion.div\n            key={safePage}\n            initial={reduceMotion ? false : { opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ duration: 0.3, ease: 'easeOut' }}\n            className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'\n          >\n            {visible.map((product) => {\n              const compareAt = compareAtText(product)\n              return (\n                <Card\n                  key={product.id}\n                  className={`flex h-full flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md ${\n                    onProductClick ? 'cursor-pointer' : ''\n                  }`}\n                  onClick={onProductClick ? () => onProductClick(product) : undefined}\n                >\n                  <CardContent className='flex flex-1 flex-col gap-4 px-4'>\n                    <div className='relative aspect-square overflow-hidden rounded-md'>\n                      {product.badge && (\n                        <span className='bg-destructive text-destructive-foreground absolute top-2 left-2 z-10 rounded-full px-2 py-0.5 text-xs font-semibold'>\n                          {product.badge}\n                        </span>\n                      )}\n                      <img\n                        src={product.image || undefined}\n                        alt={product.imageAlt ?? product.title}\n                        className='size-full rounded-md object-contain'\n                        loading='lazy'\n                        width={400}\n                        height={400}\n                      />\n                    </div>\n\n                    <div className='flex flex-1 flex-col'>\n                      <h3 className='mb-1 font-medium text-balance'>\n                        {onProductClick ? (\n                          <button\n                            type='button'\n                            onClick={(event) => {\n                              event.stopPropagation()\n                              onProductClick(product)\n                            }}\n                            className='hover:text-primary cursor-pointer text-left transition-colors'\n                          >\n                            {product.title}\n                          </button>\n                        ) : (\n                          product.title\n                        )}\n                      </h3>\n                      {typeof product.rating === 'number' && Number.isFinite(product.rating) && (\n                        <div className='text-muted-foreground mb-1 flex items-center gap-1 text-xs'>\n                          <Star className='size-3.5 fill-current' aria-hidden='true' />\n                          <span>{product.rating.toFixed(1)}</span>\n                        </div>\n                      )}\n                      <div className='mt-auto flex items-baseline gap-2'>\n                        <p className='font-semibold'>\n                          {formatMoney(product.price) ?? unavailablePriceLabel}\n                        </p>\n                        {compareAt && (\n                          <p className='text-muted-foreground text-sm line-through'>{compareAt}</p>\n                        )}\n                      </div>\n                    </div>\n                  </CardContent>\n\n                  <CardFooter className='bg-transparent border-t-0 px-3 pt-0 md:px-4'>\n                    <Button\n                      variant='outline'\n                      size='sm'\n                      className='h-8 w-full cursor-pointer px-3 text-sm'\n                      onClick={(event) => {\n                        event.stopPropagation()\n                        onAddToCart?.(product)\n                      }}\n                    >\n                      {addToCartLabel}\n                    </Button>\n                  </CardFooter>\n                </Card>\n              )\n            })}\n          </motion.div>\n        </div>\n\n        {pageCount > 1 && (\n          <div className='mt-6 flex items-center justify-center gap-3'>\n            <Button\n              type='button'\n              variant='outline'\n              size='icon-sm'\n              className='cursor-pointer'\n              aria-label={prevLabel}\n              disabled={safePage === 0}\n              onClick={() => goTo(safePage - 1)}\n            >\n              <ChevronLeft className='size-4' aria-hidden='true' />\n            </Button>\n\n            <div className='flex items-center gap-2'>\n              {pages.map((_, index) => (\n                <button\n                  key={index}\n                  type='button'\n                  aria-label={`${pageLabel} ${index + 1}`}\n                  aria-current={index === safePage ? 'true' : undefined}\n                  className={`size-2 rounded-full transition-colors ${\n                    index === safePage ? 'bg-primary' : 'bg-muted-foreground/40'\n                  }`}\n                  onClick={() => goTo(index)}\n                />\n              ))}\n            </div>\n\n            <Button\n              type='button'\n              variant='outline'\n              size='icon-sm'\n              className='cursor-pointer'\n              aria-label={nextLabel}\n              disabled={safePage === pageCount - 1}\n              onClick={() => goTo(safePage + 1)}\n            >\n              <ChevronRight className='size-4' aria-hidden='true' />\n            </Button>\n          </div>\n        )}\n\n        <p aria-live='polite' className='sr-only'>\n          {pageLabel} {safePage + 1} / {pageCount}\n        </p>\n      </div>\n    </section>\n  )\n}\n\nexport default ProductShowcase1\n"],"mappings":"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","names":["import_react"]}

package/dist/blocks/e-commerce/product-list/product-showcase-1.mjs

@@ -0,0 +1,221 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ChevronLeft, ChevronRight, Star } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import { Button } from "../../../ui/button.mjs";
+import { Card, CardContent, CardFooter } from "../../../ui/card.mjs";
+import { formatMoney } from "../../../lib/money.mjs";
+const DEFAULT_PAGE_SIZE = 6;
+const SWIPE_THRESHOLD = 48;
+function chunk(items, size) {
+  const pages = [];
+  for (let index = 0; index < items.length; index += size) {
+    pages.push(items.slice(index, index + size));
+  }
+  return pages;
+}
+function compareAtText(product) {
+  const compareAt = product.compareAtPrice;
+  if (!compareAt) return void 0;
+  const formatted = formatMoney(compareAt);
+  const price = formatMoney(product.price);
+  if (!formatted || !price) return void 0;
+  if (Number(compareAt.amount) <= Number(product.price.amount)) return void 0;
+  return formatted;
+}
+function ProductShowcase1({
+  products,
+  heading,
+  description,
+  pageSize = DEFAULT_PAGE_SIZE,
+  prevLabel = "Anterior",
+  nextLabel = "Siguiente",
+  pageLabel = "P\xE1gina",
+  unavailablePriceLabel = "Precio no disponible",
+  emptyLabel = "No hay productos para mostrar.",
+  addToCartLabel = "Agregar al carrito",
+  onAddToCart,
+  onProductClick
+}) {
+  const reduceMotion = useReducedMotion();
+  const size = Number.isInteger(pageSize) && pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE;
+  const pages = useMemo(() => chunk(products, size), [products, size]);
+  const pageCount = pages.length;
+  const [page, setPage] = useState(0);
+  const [touchStart, setTouchStart] = useState(null);
+  const safePage = pageCount === 0 ? 0 : Math.min(page, pageCount - 1);
+  const goTo = (next) => {
+    if (pageCount === 0) return;
+    if (next < 0 || next >= pageCount) return;
+    setPage(next);
+  };
+  if (pageCount === 0) {
+    return /* @__PURE__ */ jsx("section", { className: "py-12", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+      heading && /* @__PURE__ */ jsx("h2", { className: "mb-4 text-center text-2xl font-bold text-balance md:text-3xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-center", children: emptyLabel })
+    ] }) });
+  }
+  const visible = pages[safePage];
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: "py-12",
+      "aria-roledescription": "carousel",
+      onKeyDown: (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          goTo(safePage - 1);
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          goTo(safePage + 1);
+        }
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+        (heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center", children: [
+          heading && /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-balance md:text-3xl", children: heading }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-2 text-balance", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onTouchStart: (event) => setTouchStart(event.touches[0]?.clientX ?? null),
+            onTouchEnd: (event) => {
+              if (touchStart === null) return;
+              const delta = (event.changedTouches[0]?.clientX ?? touchStart) - touchStart;
+              if (delta <= -SWIPE_THRESHOLD) goTo(safePage + 1);
+              else if (delta >= SWIPE_THRESHOLD) goTo(safePage - 1);
+              setTouchStart(null);
+            },
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: reduceMotion ? false : { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { duration: 0.3, ease: "easeOut" },
+                className: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6",
+                children: visible.map((product) => {
+                  const compareAt = compareAtText(product);
+                  return /* @__PURE__ */ jsxs(
+                    Card,
+                    {
+                      className: `flex h-full flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md ${onProductClick ? "cursor-pointer" : ""}`,
+                      onClick: onProductClick ? () => onProductClick(product) : void 0,
+                      children: [
+                        /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-1 flex-col gap-4 px-4", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "relative aspect-square overflow-hidden rounded-md", children: [
+                            product.badge && /* @__PURE__ */ jsx("span", { className: "bg-destructive text-destructive-foreground absolute top-2 left-2 z-10 rounded-full px-2 py-0.5 text-xs font-semibold", children: product.badge }),
+                            /* @__PURE__ */ jsx(
+                              "img",
+                              {
+                                src: product.image || void 0,
+                                alt: product.imageAlt ?? product.title,
+                                className: "size-full rounded-md object-contain",
+                                loading: "lazy",
+                                width: 400,
+                                height: 400
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
+                            /* @__PURE__ */ jsx("h3", { className: "mb-1 font-medium text-balance", children: onProductClick ? /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: (event) => {
+                                  event.stopPropagation();
+                                  onProductClick(product);
+                                },
+                                className: "hover:text-primary cursor-pointer text-left transition-colors",
+                                children: product.title
+                              }
+                            ) : product.title }),
+                            typeof product.rating === "number" && Number.isFinite(product.rating) && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground mb-1 flex items-center gap-1 text-xs", children: [
+                              /* @__PURE__ */ jsx(Star, { className: "size-3.5 fill-current", "aria-hidden": "true" }),
+                              /* @__PURE__ */ jsx("span", { children: product.rating.toFixed(1) })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-baseline gap-2", children: [
+                              /* @__PURE__ */ jsx("p", { className: "font-semibold", children: formatMoney(product.price) ?? unavailablePriceLabel }),
+                              compareAt && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm line-through", children: compareAt })
+                            ] })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsx(CardFooter, { className: "bg-transparent border-t-0 px-3 pt-0 md:px-4", children: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "outline",
+                            size: "sm",
+                            className: "h-8 w-full cursor-pointer px-3 text-sm",
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              onAddToCart?.(product);
+                            },
+                            children: addToCartLabel
+                          }
+                        ) })
+                      ]
+                    },
+                    product.id
+                  );
+                })
+              },
+              safePage
+            )
+          }
+        ),
+        pageCount > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "icon-sm",
+              className: "cursor-pointer",
+              "aria-label": prevLabel,
+              disabled: safePage === 0,
+              onClick: () => goTo(safePage - 1),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: pages.map((_, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${pageLabel} ${index + 1}`,
+              "aria-current": index === safePage ? "true" : void 0,
+              className: `size-2 rounded-full transition-colors ${index === safePage ? "bg-primary" : "bg-muted-foreground/40"}`,
+              onClick: () => goTo(index)
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "icon-sm",
+              className: "cursor-pointer",
+              "aria-label": nextLabel,
+              disabled: safePage === pageCount - 1,
+              onClick: () => goTo(safePage + 1),
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("p", { "aria-live": "polite", className: "sr-only", children: [
+          pageLabel,
+          " ",
+          safePage + 1,
+          " / ",
+          pageCount
+        ] })
+      ] })
+    }
+  );
+}
+var product_showcase_1_default = ProductShowcase1;
+export {
+  ProductShowcase1,
+  product_showcase_1_default as default
+};
+//# sourceMappingURL=product-showcase-1.mjs.map

package/dist/blocks/e-commerce/product-list/product-showcase-1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-list/product-showcase-1.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useState } from 'react'\nimport { ChevronLeft, ChevronRight, Star } from 'lucide-react'\nimport { motion, useReducedMotion } from 'motion/react'\n\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardFooter } from '../../../ui/card'\nimport { formatMoney } from '../../../lib/money'\nimport type { ProductPresentation } from '../../../lib/contracts'\n\nexport interface ProductShowcase1Props {\n  products: ProductPresentation[]\n  heading?: string\n  description?: string\n  pageSize?: number\n  prevLabel?: string\n  nextLabel?: string\n  /** Label for the current-page status, e.g. \"Página\". */\n  pageLabel?: string\n  unavailablePriceLabel?: string\n  emptyLabel?: string\n  addToCartLabel?: string\n  onAddToCart?: (product: ProductPresentation) => void\n  onProductClick?: (product: ProductPresentation) => void\n}\n\nconst DEFAULT_PAGE_SIZE = 6\nconst SWIPE_THRESHOLD = 48\n\nfunction chunk<T>(items: readonly T[], size: number): T[][] {\n  const pages: T[][] = []\n  for (let index = 0; index < items.length; index += size) {\n    pages.push(items.slice(index, index + size))\n  }\n  return pages\n}\n\nfunction compareAtText(product: ProductPresentation): string | undefined {\n  const compareAt = product.compareAtPrice\n  if (!compareAt) return undefined\n  const formatted = formatMoney(compareAt)\n  const price = formatMoney(product.price)\n  if (!formatted || !price) return undefined\n  if (Number(compareAt.amount) <= Number(product.price.amount)) return undefined\n  return formatted\n}\n\n/**\n * Combined grid-and-carousel product presentation: fixed-size grid pages\n * navigated manually (prev/next) with a visible current-page indication. There\n * is no autoplay, no auto-advance, and no infinite loop. Controls are real\n * buttons (keyboard operable and visible at every breakpoint); touch swipe is an\n * addition, never the only way to navigate. Below-fold images are lazy.\n *\n * Data access lives in the host: this block only renders the props it receives\n * and reports interactions through callbacks (no backend/router/measurement\n * imports).\n */\nexport function ProductShowcase1({\n  products,\n  heading,\n  description,\n  pageSize = DEFAULT_PAGE_SIZE,\n  prevLabel = 'Anterior',\n  nextLabel = 'Siguiente',\n  pageLabel = 'Página',\n  unavailablePriceLabel = 'Precio no disponible',\n  emptyLabel = 'No hay productos para mostrar.',\n  addToCartLabel = 'Agregar al carrito',\n  onAddToCart,\n  onProductClick,\n}: ProductShowcase1Props) {\n  const reduceMotion = useReducedMotion()\n  const size = Number.isInteger(pageSize) && pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE\n  const pages = useMemo(() => chunk(products, size), [products, size])\n  const pageCount = pages.length\n  const [page, setPage] = useState(0)\n  const [touchStart, setTouchStart] = useState<number | null>(null)\n  const safePage = pageCount === 0 ? 0 : Math.min(page, pageCount - 1)\n\n  const goTo = (next: number) => {\n    if (pageCount === 0) return\n    if (next < 0 || next >= pageCount) return\n    setPage(next)\n  }\n\n  if (pageCount === 0) {\n    return (\n      <section className='py-12'>\n        <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n          {heading && (\n            <h2 className='mb-4 text-center text-2xl font-bold text-balance md:text-3xl'>\n              {heading}\n            </h2>\n          )}\n          <p className='text-muted-foreground text-center'>{emptyLabel}</p>\n        </div>\n      </section>\n    )\n  }\n\n  const visible = pages[safePage]\n\n  return (\n    <section\n      className='py-12'\n      aria-roledescription='carousel'\n      onKeyDown={(event) => {\n        if (event.key === 'ArrowLeft') {\n          event.preventDefault()\n          goTo(safePage - 1)\n        } else if (event.key === 'ArrowRight') {\n          event.preventDefault()\n          goTo(safePage + 1)\n        }\n      }}\n    >\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {(heading || description) && (\n          <div className='mb-8 text-center'>\n            {heading && (\n              <h2 className='text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>\n            )}\n            {description && <p className='text-muted-foreground mt-2 text-balance'>{description}</p>}\n          </div>\n        )}\n\n        <div\n          onTouchStart={(event) => setTouchStart(event.touches[0]?.clientX ?? null)}\n          onTouchEnd={(event) => {\n            if (touchStart === null) return\n            const delta = (event.changedTouches[0]?.clientX ?? touchStart) - touchStart\n            if (delta <= -SWIPE_THRESHOLD) goTo(safePage + 1)\n            else if (delta >= SWIPE_THRESHOLD) goTo(safePage - 1)\n            setTouchStart(null)\n          }}\n        >\n          <motion.div\n            key={safePage}\n            initial={reduceMotion ? false : { opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ duration: 0.3, ease: 'easeOut' }}\n            className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'\n          >\n            {visible.map((product) => {\n              const compareAt = compareAtText(product)\n              return (\n                <Card\n                  key={product.id}\n                  className={`flex h-full flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md ${\n                    onProductClick ? 'cursor-pointer' : ''\n                  }`}\n                  onClick={onProductClick ? () => onProductClick(product) : undefined}\n                >\n                  <CardContent className='flex flex-1 flex-col gap-4 px-4'>\n                    <div className='relative aspect-square overflow-hidden rounded-md'>\n                      {product.badge && (\n                        <span className='bg-destructive text-destructive-foreground absolute top-2 left-2 z-10 rounded-full px-2 py-0.5 text-xs font-semibold'>\n                          {product.badge}\n                        </span>\n                      )}\n                      <img\n                        src={product.image || undefined}\n                        alt={product.imageAlt ?? product.title}\n                        className='size-full rounded-md object-contain'\n                        loading='lazy'\n                        width={400}\n                        height={400}\n                      />\n                    </div>\n\n                    <div className='flex flex-1 flex-col'>\n                      <h3 className='mb-1 font-medium text-balance'>\n                        {onProductClick ? (\n                          <button\n                            type='button'\n                            onClick={(event) => {\n                              event.stopPropagation()\n                              onProductClick(product)\n                            }}\n                            className='hover:text-primary cursor-pointer text-left transition-colors'\n                          >\n                            {product.title}\n                          </button>\n                        ) : (\n                          product.title\n                        )}\n                      </h3>\n                      {typeof product.rating === 'number' && Number.isFinite(product.rating) && (\n                        <div className='text-muted-foreground mb-1 flex items-center gap-1 text-xs'>\n                          <Star className='size-3.5 fill-current' aria-hidden='true' />\n                          <span>{product.rating.toFixed(1)}</span>\n                        </div>\n                      )}\n                      <div className='mt-auto flex items-baseline gap-2'>\n                        <p className='font-semibold'>\n                          {formatMoney(product.price) ?? unavailablePriceLabel}\n                        </p>\n                        {compareAt && (\n                          <p className='text-muted-foreground text-sm line-through'>{compareAt}</p>\n                        )}\n                      </div>\n                    </div>\n                  </CardContent>\n\n                  <CardFooter className='bg-transparent border-t-0 px-3 pt-0 md:px-4'>\n                    <Button\n                      variant='outline'\n                      size='sm'\n                      className='h-8 w-full cursor-pointer px-3 text-sm'\n                      onClick={(event) => {\n                        event.stopPropagation()\n                        onAddToCart?.(product)\n                      }}\n                    >\n                      {addToCartLabel}\n                    </Button>\n                  </CardFooter>\n                </Card>\n              )\n            })}\n          </motion.div>\n        </div>\n\n        {pageCount > 1 && (\n          <div className='mt-6 flex items-center justify-center gap-3'>\n            <Button\n              type='button'\n              variant='outline'\n              size='icon-sm'\n              className='cursor-pointer'\n              aria-label={prevLabel}\n              disabled={safePage === 0}\n              onClick={() => goTo(safePage - 1)}\n            >\n              <ChevronLeft className='size-4' aria-hidden='true' />\n            </Button>\n\n            <div className='flex items-center gap-2'>\n              {pages.map((_, index) => (\n                <button\n                  key={index}\n                  type='button'\n                  aria-label={`${pageLabel} ${index + 1}`}\n                  aria-current={index === safePage ? 'true' : undefined}\n                  className={`size-2 rounded-full transition-colors ${\n                    index === safePage ? 'bg-primary' : 'bg-muted-foreground/40'\n                  }`}\n                  onClick={() => goTo(index)}\n                />\n              ))}\n            </div>\n\n            <Button\n              type='button'\n              variant='outline'\n              size='icon-sm'\n              className='cursor-pointer'\n              aria-label={nextLabel}\n              disabled={safePage === pageCount - 1}\n              onClick={() => goTo(safePage + 1)}\n            >\n              <ChevronRight className='size-4' aria-hidden='true' />\n            </Button>\n          </div>\n        )}\n\n        <p aria-live='polite' className='sr-only'>\n          {pageLabel} {safePage + 1} / {pageCount}\n        </p>\n      </div>\n    </section>\n  )\n}\n\nexport default ProductShowcase1\n"],"mappings":";AA0FQ,SAEI,KAFJ;AAxFR,SAAS,SAAS,gBAAgB;AAClC,SAAS,aAAa,cAAc,YAAY;AAChD,SAAS,QAAQ,wBAAwB;AAEzC,SAAS,cAAc;AACvB,SAAS,MAAM,aAAa,kBAAkB;AAC9C,SAAS,mBAAmB;AAmB5B,MAAM,oBAAoB;AAC1B,MAAM,kBAAkB;AAExB,SAAS,MAAS,OAAqB,MAAqB;AAC1D,QAAM,QAAe,CAAC;AACtB,WAAS,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS,MAAM;AACvD,UAAM,KAAK,MAAM,MAAM,OAAO,QAAQ,IAAI,CAAC;AAAA,EAC7C;AACA,SAAO;AACT;AAEA,SAAS,cAAc,SAAkD;AACvE,QAAM,YAAY,QAAQ;AAC1B,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,YAAY,YAAY,SAAS;AACvC,QAAM,QAAQ,YAAY,QAAQ,KAAK;AACvC,MAAI,CAAC,aAAa,CAAC,MAAO,QAAO;AACjC,MAAI,OAAO,UAAU,MAAM,KAAK,OAAO,QAAQ,MAAM,MAAM,EAAG,QAAO;AACrE,SAAO;AACT;AAaO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,eAAe,iBAAiB;AACtC,QAAM,OAAO,OAAO,UAAU,QAAQ,KAAK,WAAW,IAAI,WAAW;AACrE,QAAM,QAAQ,QAAQ,MAAM,MAAM,UAAU,IAAI,GAAG,CAAC,UAAU,IAAI,CAAC;AACnE,QAAM,YAAY,MAAM;AACxB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwB,IAAI;AAChE,QAAM,WAAW,cAAc,IAAI,IAAI,KAAK,IAAI,MAAM,YAAY,CAAC;AAEnE,QAAM,OAAO,CAAC,SAAiB;AAC7B,QAAI,cAAc,EAAG;AACrB,QAAI,OAAO,KAAK,QAAQ,UAAW;AACnC,YAAQ,IAAI;AAAA,EACd;AAEA,MAAI,cAAc,GAAG;AACnB,WACE,oBAAC,aAAQ,WAAU,SACjB,+BAAC,SAAI,WAAU,iDACZ;AAAA,iBACC,oBAAC,QAAG,WAAU,gEACX,mBACH;AAAA,MAEF,oBAAC,OAAE,WAAU,qCAAqC,sBAAW;AAAA,OAC/D,GACF;AAAA,EAEJ;AAEA,QAAM,UAAU,MAAM,QAAQ;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,wBAAqB;AAAA,MACrB,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,eAAe;AACrB,eAAK,WAAW,CAAC;AAAA,QACnB,WAAW,MAAM,QAAQ,cAAc;AACrC,gBAAM,eAAe;AACrB,eAAK,WAAW,CAAC;AAAA,QACnB;AAAA,MACF;AAAA,MAEA,+BAAC,SAAI,WAAU,iDACX;AAAA,oBAAW,gBACX,qBAAC,SAAI,WAAU,oBACZ;AAAA,qBACC,oBAAC,QAAG,WAAU,+CAA+C,mBAAQ;AAAA,UAEtE,eAAe,oBAAC,OAAE,WAAU,2CAA2C,uBAAY;AAAA,WACtF;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,cAAc,CAAC,UAAU,cAAc,MAAM,QAAQ,CAAC,GAAG,WAAW,IAAI;AAAA,YACxE,YAAY,CAAC,UAAU;AACrB,kBAAI,eAAe,KAAM;AACzB,oBAAM,SAAS,MAAM,eAAe,CAAC,GAAG,WAAW,cAAc;AACjE,kBAAI,SAAS,CAAC,gBAAiB,MAAK,WAAW,CAAC;AAAA,uBACvC,SAAS,gBAAiB,MAAK,WAAW,CAAC;AACpD,4BAAc,IAAI;AAAA,YACpB;AAAA,YAEA;AAAA,cAAC,OAAO;AAAA,cAAP;AAAA,gBAEC,SAAS,eAAe,QAAQ,EAAE,SAAS,EAAE;AAAA,gBAC7C,SAAS,EAAE,SAAS,EAAE;AAAA,gBACtB,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU;AAAA,gBAC7C,WAAU;AAAA,gBAET,kBAAQ,IAAI,CAAC,YAAY;AACxB,wBAAM,YAAY,cAAc,OAAO;AACvC,yBACE;AAAA,oBAAC;AAAA;AAAA,sBAEC,WAAW,yHACT,iBAAiB,mBAAmB,EACtC;AAAA,sBACA,SAAS,iBAAiB,MAAM,eAAe,OAAO,IAAI;AAAA,sBAE1D;AAAA,6CAAC,eAAY,WAAU,mCACrB;AAAA,+CAAC,SAAI,WAAU,qDACZ;AAAA,oCAAQ,SACP,oBAAC,UAAK,WAAU,wHACb,kBAAQ,OACX;AAAA,4BAEF;AAAA,8BAAC;AAAA;AAAA,gCACC,KAAK,QAAQ,SAAS;AAAA,gCACtB,KAAK,QAAQ,YAAY,QAAQ;AAAA,gCACjC,WAAU;AAAA,gCACV,SAAQ;AAAA,gCACR,OAAO;AAAA,gCACP,QAAQ;AAAA;AAAA,4BACV;AAAA,6BACF;AAAA,0BAEA,qBAAC,SAAI,WAAU,wBACb;AAAA,gDAAC,QAAG,WAAU,iCACX,2BACC;AAAA,8BAAC;AAAA;AAAA,gCACC,MAAK;AAAA,gCACL,SAAS,CAAC,UAAU;AAClB,wCAAM,gBAAgB;AACtB,iDAAe,OAAO;AAAA,gCACxB;AAAA,gCACA,WAAU;AAAA,gCAET,kBAAQ;AAAA;AAAA,4BACX,IAEA,QAAQ,OAEZ;AAAA,4BACC,OAAO,QAAQ,WAAW,YAAY,OAAO,SAAS,QAAQ,MAAM,KACnE,qBAAC,SAAI,WAAU,8DACb;AAAA,kDAAC,QAAK,WAAU,yBAAwB,eAAY,QAAO;AAAA,8BAC3D,oBAAC,UAAM,kBAAQ,OAAO,QAAQ,CAAC,GAAE;AAAA,+BACnC;AAAA,4BAEF,qBAAC,SAAI,WAAU,qCACb;AAAA,kDAAC,OAAE,WAAU,iBACV,sBAAY,QAAQ,KAAK,KAAK,uBACjC;AAAA,8BACC,aACC,oBAAC,OAAE,WAAU,8CAA8C,qBAAU;AAAA,+BAEzE;AAAA,6BACF;AAAA,2BACF;AAAA,wBAEA,oBAAC,cAAW,WAAU,+CACpB;AAAA,0BAAC;AAAA;AAAA,4BACC,SAAQ;AAAA,4BACR,MAAK;AAAA,4BACL,WAAU;AAAA,4BACV,SAAS,CAAC,UAAU;AAClB,oCAAM,gBAAgB;AACtB,4CAAc,OAAO;AAAA,4BACvB;AAAA,4BAEC;AAAA;AAAA,wBACH,GACF;AAAA;AAAA;AAAA,oBArEK,QAAQ;AAAA,kBAsEf;AAAA,gBAEJ,CAAC;AAAA;AAAA,cAlFI;AAAA,YAmFP;AAAA;AAAA,QACF;AAAA,QAEC,YAAY,KACX,qBAAC,SAAI,WAAU,+CACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAY;AAAA,cACZ,UAAU,aAAa;AAAA,cACvB,SAAS,MAAM,KAAK,WAAW,CAAC;AAAA,cAEhC,8BAAC,eAAY,WAAU,UAAS,eAAY,QAAO;AAAA;AAAA,UACrD;AAAA,UAEA,oBAAC,SAAI,WAAU,2BACZ,gBAAM,IAAI,CAAC,GAAG,UACb;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,cAAY,GAAG,SAAS,IAAI,QAAQ,CAAC;AAAA,cACrC,gBAAc,UAAU,WAAW,SAAS;AAAA,cAC5C,WAAW,yCACT,UAAU,WAAW,eAAe,wBACtC;AAAA,cACA,SAAS,MAAM,KAAK,KAAK;AAAA;AAAA,YAPpB;AAAA,UAQP,CACD,GACH;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAY;AAAA,cACZ,UAAU,aAAa,YAAY;AAAA,cACnC,SAAS,MAAM,KAAK,WAAW,CAAC;AAAA,cAEhC,8BAAC,gBAAa,WAAU,UAAS,eAAY,QAAO;AAAA;AAAA,UACtD;AAAA,WACF;AAAA,QAGF,qBAAC,OAAE,aAAU,UAAS,WAAU,WAC7B;AAAA;AAAA,UAAU;AAAA,UAAE,WAAW;AAAA,UAAE;AAAA,UAAI;AAAA,WAChC;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,6BAAQ;","names":[]}

package/dist/blocks/e-commerce/product-overview/product-overview-gallery.d.ts

@@ -0,0 +1,20 @@
+export interface ProductOverviewGalleryProps {
+    /** Resolved image URLs for the product (never empty strings; a fallback is allowed). */
+    images: string[];
+    /** Product title, used for alt text. */
+    title: string;
+    /** Optional badge label; omitted when absent. */
+    badgeLabel?: string;
+    selectedImage: number;
+    onSelectImage: (index: number) => void;
+    photosLabel?: string;
+}
+/**
+ * Image-forward gallery used by the canonical ProductOverview `rich` presentation: a large
+ * primary image with an optional badge and a photo count, plus a thumbnail strip. Operates on
+ * already-resolved URLs so it carries no product-shape assumption (no `mainImages`/`galleryImages`
+ * split, no sector fields).
+ */
+export declare function ProductOverviewGallery({ images, title, badgeLabel, selectedImage, onSelectImage, photosLabel, }: ProductOverviewGalleryProps): import("react").JSX.Element;
+export default ProductOverviewGallery;
+//# sourceMappingURL=product-overview-gallery.d.ts.map

package/dist/blocks/e-commerce/product-overview/product-overview-gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-overview-gallery.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/product-overview/product-overview-gallery.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,2BAA2B;IAC1C,wFAAwF;IACxF,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,KAAK,EACL,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAqB,GACtB,EAAE,2BAA2B,+BAuC7B;AAED,eAAe,sBAAsB,CAAA"}

package/dist/blocks/e-commerce/product-overview/product-overview-gallery.js

@@ -0,0 +1,71 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var product_overview_gallery_exports = {};
+__export(product_overview_gallery_exports, {
+  ProductOverviewGallery: () => ProductOverviewGallery,
+  default: () => product_overview_gallery_default
+});
+module.exports = __toCommonJS(product_overview_gallery_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_badge = require("../../../ui/badge.js");
+var import_utils = require("../../../lib/utils.js");
+function ProductOverviewGallery({
+  images,
+  title,
+  badgeLabel,
+  selectedImage,
+  onSelectImage,
+  photosLabel = "fotos"
+}) {
+  const activeImage = images[Math.min(selectedImage, images.length - 1)];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-muted relative aspect-square overflow-hidden rounded-xl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: activeImage || void 0, alt: title, className: "size-full object-cover" }),
+      badgeLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { className: "absolute top-4 left-4 px-2.5 py-0.5 font-semibold", children: badgeLabel }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute right-4 bottom-4 rounded-full bg-black/60 px-3 py-1.5 text-sm text-white backdrop-blur-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Camera, { className: "mr-1 inline size-4" }),
+        images.length,
+        " ",
+        photosLabel
+      ] })
+    ] }),
+    images.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 flex gap-3 overflow-x-auto pb-2", children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelectImage(index),
+        className: (0, import_utils.cn)(
+          "relative aspect-square size-20 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border-2 transition-all",
+          selectedImage === index ? "border-primary ring-primary/20 shadow-md ring-2" : "border-muted hover:border-muted-foreground/50"
+        ),
+        "aria-label": `Mostrar imagen ${index + 1} de ${title}`,
+        "aria-pressed": selectedImage === index,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: image || void 0, alt: `${title} ${index + 1}`, className: "size-full object-cover" })
+      },
+      `${title}:gallery:${index}`
+    )) }) : null
+  ] });
+}
+var product_overview_gallery_default = ProductOverviewGallery;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProductOverviewGallery
+});
+//# sourceMappingURL=product-overview-gallery.js.map