@thorprovider/blocks 1.0.0 → 3.0.0

package/dist/blocks/e-commerce/product-list/product-card.mjs

@@ -0,0 +1,337 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GalleryHorizontalEnd, Heart, ShoppingCart, Star } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import { Badge } from "../../../ui/badge.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Card, CardContent, CardFooter } from "../../../ui/card.mjs";
+import { cn } from "../../../lib/utils.mjs";
+import { formatMoney, isAvailableMoney } from "../../../lib/money.mjs";
+function compareAtText(item) {
+  const compareAt = item.compareAtPrice;
+  if (!compareAt) return void 0;
+  const formatted = formatMoney(compareAt);
+  const price = formatMoney(item.price);
+  if (!formatted || !price) return void 0;
+  if (Number(compareAt.amount) <= Number(item.price.amount)) return void 0;
+  return formatted;
+}
+function ratingValue(item) {
+  return typeof item.rating === "number" && Number.isFinite(item.rating) ? item.rating : void 0;
+}
+function PriceRow({
+  item,
+  unavailablePriceLabel
+}) {
+  const available = isAvailableMoney(item.price);
+  const compareAt = compareAtText(item);
+  return /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-baseline gap-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "font-semibold", children: available ? formatMoney(item.price) : unavailablePriceLabel }),
+    compareAt && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm line-through md:text-base xl:text-sm 2xl:text-base", children: compareAt })
+  ] });
+}
+function RatingRow({ value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-1 text-xs", children: [
+    /* @__PURE__ */ jsx(Star, { className: "size-3.5 fill-current", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: value.toFixed(1) })
+  ] });
+}
+function ClassicPresentation({
+  item,
+  hideAddToCart = false,
+  onAddToCart,
+  onProductClick,
+  addToCartLabel,
+  unavailablePriceLabel
+}) {
+  const reduceMotion = useReducedMotion();
+  const available = isAvailableMoney(item.price);
+  const rating = ratingValue(item);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: reduceMotion ? false : { opacity: 0, y: 16 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, margin: "-40px" },
+      whileHover: reduceMotion ? void 0 : { y: -4 },
+      transition: { duration: 0.35, ease: "easeOut" },
+      children: /* @__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(item) : 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: [
+                item.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: item.badge }),
+                item.image ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: item.image,
+                    alt: item.imageAlt ?? item.title,
+                    className: "size-full rounded-md object-contain",
+                    loading: "lazy",
+                    width: 400,
+                    height: 400
+                  }
+                ) : /* @__PURE__ */ jsx("div", { "data-slot": "product-image-placeholder", "aria-hidden": "true", className: "bg-muted size-full rounded-md" })
+              ] }),
+              /* @__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: (e) => {
+                      e.stopPropagation();
+                      onProductClick(item);
+                    },
+                    className: "hover:text-primary cursor-pointer text-left transition-colors",
+                    children: item.title
+                  }
+                ) : item.title }),
+                rating !== void 0 && /* @__PURE__ */ jsx(RatingRow, { value: rating }),
+                /* @__PURE__ */ jsx(PriceRow, { item, unavailablePriceLabel })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(CardFooter, { className: "bg-transparent px-3 pt-0 border-t-0 md:px-4", children: hideAddToCart ? null : /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-8 w-full cursor-pointer px-3 text-sm text-xs",
+                disabled: !available,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onAddToCart?.(item);
+                },
+                children: addToCartLabel
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+function MinimalPresentation({
+  item,
+  hideAddToCart = false,
+  onAddToCart,
+  onProductClick,
+  addToCartLabel,
+  unavailablePriceLabel
+}) {
+  const available = isAvailableMoney(item.price);
+  const rating = ratingValue(item);
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(
+        "group overflow-hidden py-4 shadow-none transition-all hover:shadow-lg",
+        onProductClick && "cursor-pointer"
+      ),
+      onClick: onProductClick ? () => onProductClick(item) : void 0,
+      children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4 px-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative aspect-square overflow-hidden rounded-md", children: [
+          item.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: item.badge }),
+          item.image ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.image,
+              alt: item.imageAlt ?? item.title,
+              width: 400,
+              height: 400,
+              className: "size-full object-cover transition-transform duration-300 group-hover:scale-105",
+              loading: "lazy"
+            }
+          ) : /* @__PURE__ */ jsx("div", { "data-slot": "product-image-placeholder", "aria-hidden": "true", className: "bg-muted size-full" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "line-clamp-1 text-lg font-semibold text-balance", children: item.title }),
+          rating !== void 0 && /* @__PURE__ */ jsx(RatingRow, { value: rating }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx(PriceRow, { item, unavailablePriceLabel }),
+            hideAddToCart ? null : /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "size-8 shrink-0 cursor-pointer",
+                "aria-label": addToCartLabel,
+                disabled: !available,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onAddToCart?.(item);
+                },
+                children: /* @__PURE__ */ jsx(ShoppingCart, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function WishlistHeart({
+  item,
+  wishlisted,
+  onToggleWishlist,
+  addToWishlistLabel,
+  removeFromWishlistLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "bg-background/80 absolute end-2 top-2 z-20 size-8 cursor-pointer rounded-full p-0 backdrop-blur-xs disabled:cursor-not-allowed",
+      "aria-label": wishlisted ? removeFromWishlistLabel : addToWishlistLabel,
+      "aria-pressed": wishlisted,
+      disabled: !onToggleWishlist,
+      onClick: (e) => {
+        e.stopPropagation();
+        onToggleWishlist?.(item, !wishlisted);
+      },
+      children: /* @__PURE__ */ jsx(
+        Heart,
+        {
+          className: cn(
+            "size-4 transition-colors",
+            wishlisted ? "fill-destructive text-destructive" : "fill-transparent text-muted-foreground"
+          ),
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+function RichPresentation({
+  item,
+  hideAddToCart = false,
+  wishlisted = false,
+  onAddToCart,
+  onProductClick,
+  onToggleWishlist,
+  onViewSimilar,
+  addToCartLabel,
+  unavailablePriceLabel,
+  addToWishlistLabel,
+  removeFromWishlistLabel,
+  viewSimilarLabel
+}) {
+  const available = isAvailableMoney(item.price);
+  const rating = ratingValue(item);
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(
+        "relative overflow-hidden rounded-md py-0 shadow-none transition-all hover:shadow-md",
+        onProductClick && "cursor-pointer"
+      ),
+      onClick: onProductClick ? () => onProductClick(item) : void 0,
+      children: /* @__PURE__ */ jsxs(CardContent, { className: "px-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative aspect-square w-full overflow-hidden", children: [
+          item.image ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.image,
+              alt: item.imageAlt ?? item.title,
+              className: "size-full object-cover",
+              loading: "lazy"
+            }
+          ) : /* @__PURE__ */ jsx("div", { "data-slot": "product-image-placeholder", "aria-hidden": "true", className: "bg-muted size-full" }),
+          item.badge && /* @__PURE__ */ jsx(Badge, { className: "absolute start-2 top-2 z-20 flex items-center gap-1 px-2 py-1 font-semibold text-white backdrop-blur-xs", children: item.badge }),
+          rating !== void 0 && /* @__PURE__ */ jsxs("div", { className: "bg-background/80 absolute start-2 bottom-2 z-10 flex items-center gap-1 rounded-md border px-2 py-1 text-sm backdrop-blur-xs", children: [
+            /* @__PURE__ */ jsx(Star, { className: "fill-foreground text-foreground size-4", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: rating.toFixed(1) })
+          ] }),
+          onViewSimilar && /* @__PURE__ */ jsx("div", { className: "group absolute end-2 bottom-2 z-10", children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "group bg-background/80 hover:bg-background h-8 cursor-pointer overflow-hidden rounded-full p-0 px-3 text-xs shadow-xs backdrop-blur-xs transition-all duration-200",
+              "aria-label": viewSimilarLabel,
+              onClick: (e) => {
+                e.stopPropagation();
+                onViewSimilar(item);
+              },
+              children: [
+                /* @__PURE__ */ jsx(GalleryHorizontalEnd, { className: "absolute start-2 size-4 shrink-0", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "ms-6 whitespace-nowrap text-xs opacity-0 group-hover:opacity-100", children: viewSimilarLabel })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            WishlistHeart,
+            {
+              item,
+              wishlisted,
+              onToggleWishlist,
+              addToWishlistLabel,
+              removeFromWishlistLabel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-medium text-balance", children: item.title }),
+          /* @__PURE__ */ jsx(PriceRow, { item, unavailablePriceLabel }),
+          hideAddToCart ? null : /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "mt-2 w-full cursor-pointer text-xs",
+              disabled: !available,
+              onClick: (e) => {
+                e.stopPropagation();
+                onAddToCart?.(item);
+              },
+              children: addToCartLabel
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function ProductCard({
+  item,
+  presentation = "classic",
+  wishlisted,
+  hideAddToCart,
+  onAddToCart,
+  onProductClick,
+  onToggleWishlist,
+  onViewSimilar,
+  addToCartLabel = "Agregar al carrito",
+  unavailablePriceLabel = "Precio no disponible",
+  addToWishlistLabel = "A\xF1adir a favoritos",
+  removeFromWishlistLabel = "Quitar de favoritos",
+  viewSimilarLabel = "Ver similares"
+}) {
+  const shared = {
+    item,
+    presentation,
+    wishlisted,
+    hideAddToCart,
+    onAddToCart,
+    onProductClick,
+    onToggleWishlist,
+    onViewSimilar,
+    addToCartLabel,
+    unavailablePriceLabel,
+    addToWishlistLabel,
+    removeFromWishlistLabel,
+    viewSimilarLabel
+  };
+  if (presentation === "minimal") return /* @__PURE__ */ jsx(MinimalPresentation, { ...shared });
+  if (presentation === "rich") return /* @__PURE__ */ jsx(RichPresentation, { ...shared });
+  return /* @__PURE__ */ jsx(ClassicPresentation, { ...shared });
+}
+var product_card_default = ProductCard;
+export {
+  ProductCard,
+  product_card_default as default
+};
+//# sourceMappingURL=product-card.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-list/product-card.tsx"],"sourcesContent":["'use client'\n\nimport { GalleryHorizontalEnd, Heart, ShoppingCart, Star } from 'lucide-react'\nimport { motion, useReducedMotion } from 'motion/react'\n\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardFooter } from '../../../ui/card'\nimport { cn } from '../../../lib/utils'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type { ProductCardSpecProps, ProductPresentation } from '../../../lib/contracts'\n\n/**\n * The bounded presentation surface. `classic` is the boxed card with an\n * add-to-cart footer, `minimal` is a lean image-forward tile, and `rich` adds\n * overlay actions (wishlist heart, view similar). The value changes structure,\n * never the data contract or the callbacks.\n */\nexport type ProductCardPresentation = NonNullable<ProductCardSpecProps['presentation']>\n\nexport interface ProductCardProps {\n  /** The single canonical product presentation item (canonical `Money`). */\n  item: ProductPresentation\n  /** Bounded presentation option; defaults to `classic`. */\n  presentation?: ProductCardPresentation\n  /** Host-resolved wishlist membership; reflects the rich presentation heart. */\n  wishlisted?: boolean\n  onAddToCart?: (item: ProductPresentation) => void\n  /**\n   * Hides the add-to-cart control for listings whose only action is opening the\n   * product. Without this a host with no cart callback would render an inert\n   * button.\n   */\n  hideAddToCart?: boolean\n  onProductClick?: (item: ProductPresentation) => void\n  /**\n   * Host-owned wishlist toggle; reports the item and the next state from the\n   * click handler (never from an effect).\n   */\n  onToggleWishlist?: (item: ProductPresentation, nextState: boolean) => void\n  onViewSimilar?: (item: ProductPresentation) => void\n  addToCartLabel?: string\n  /** Shown when a price is present but unavailable (never a zero amount). */\n  unavailablePriceLabel?: string\n  addToWishlistLabel?: string\n  removeFromWishlistLabel?: string\n  viewSimilarLabel?: string\n}\n\n/** What the presentations receive: every label already resolved by `ProductCard`. */\ntype PresentationProps = ProductCardProps & {\n  addToCartLabel: string\n  unavailablePriceLabel: string\n  addToWishlistLabel: string\n  removeFromWishlistLabel: string\n  viewSimilarLabel: string\n}\n\n/** Comparison price only when both values are valid and the compare is higher. */\nfunction compareAtText(item: ProductPresentation): string | undefined {\n  const compareAt = item.compareAtPrice\n  if (!compareAt) return undefined\n  const formatted = formatMoney(compareAt)\n  const price = formatMoney(item.price)\n  if (!formatted || !price) return undefined\n  if (Number(compareAt.amount) <= Number(item.price.amount)) return undefined\n  return formatted\n}\n\nfunction ratingValue(item: ProductPresentation): number | undefined {\n  return typeof item.rating === 'number' && Number.isFinite(item.rating) ? item.rating : undefined\n}\n\nfunction PriceRow({\n  item,\n  unavailablePriceLabel,\n}: {\n  item: ProductPresentation\n  unavailablePriceLabel: string\n}) {\n  const available = isAvailableMoney(item.price)\n  const compareAt = compareAtText(item)\n  return (\n    <div className='mt-auto flex items-baseline gap-2'>\n      <p className='font-semibold'>\n        {available ? formatMoney(item.price) : unavailablePriceLabel}\n      </p>\n      {compareAt && (\n        <p className='text-muted-foreground text-sm line-through md:text-base xl:text-sm 2xl:text-base'>\n          {compareAt}\n        </p>\n      )}\n    </div>\n  )\n}\n\nfunction RatingRow({ value }: { value: number }) {\n  return (\n    <div className='text-muted-foreground flex items-center gap-1 text-xs'>\n      <Star className='size-3.5 fill-current' aria-hidden='true' />\n      <span>{value.toFixed(1)}</span>\n    </div>\n  )\n}\n\nfunction ClassicPresentation({\n  item,\n  hideAddToCart = false,\n  onAddToCart,\n  onProductClick,\n  addToCartLabel,\n  unavailablePriceLabel,\n}: PresentationProps) {\n  const reduceMotion = useReducedMotion()\n  const available = isAvailableMoney(item.price)\n  const rating = ratingValue(item)\n\n  return (\n    <motion.div\n      initial={reduceMotion ? false : { opacity: 0, y: 16 }}\n      whileInView={{ opacity: 1, y: 0 }}\n      viewport={{ once: true, margin: '-40px' }}\n      whileHover={reduceMotion ? undefined : { y: -4 }}\n      transition={{ duration: 0.35, ease: 'easeOut' }}\n    >\n      <Card\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(item) : 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            {item.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                {item.badge}\n              </span>\n            )}\n            {item.image ? (\n              <img\n                src={item.image}\n                alt={item.imageAlt ?? item.title}\n                className='size-full rounded-md object-contain'\n                loading='lazy'\n                width={400}\n                height={400}\n              />\n            ) : (\n              <div data-slot='product-image-placeholder' aria-hidden='true' className='bg-muted size-full rounded-md' />\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={(e) => {\n                    e.stopPropagation()\n                    onProductClick(item)\n                  }}\n                  className='hover:text-primary cursor-pointer text-left transition-colors'\n                >\n                  {item.title}\n                </button>\n              ) : (\n                item.title\n              )}\n            </h3>\n            {rating !== undefined && <RatingRow value={rating} />}\n            <PriceRow item={item} unavailablePriceLabel={unavailablePriceLabel} />\n          </div>\n        </CardContent>\n\n        <CardFooter className='bg-transparent px-3 pt-0 border-t-0 md:px-4'>\n          {hideAddToCart ? null : (\n            <Button\n              variant='outline'\n              size='sm'\n              className='h-8 w-full cursor-pointer px-3 text-sm text-xs'\n              disabled={!available}\n              onClick={(e) => {\n                e.stopPropagation()\n                onAddToCart?.(item)\n              }}\n            >\n              {addToCartLabel}\n            </Button>\n          )}\n        </CardFooter>\n      </Card>\n    </motion.div>\n  )\n}\n\nfunction MinimalPresentation({\n  item,\n  hideAddToCart = false,\n  onAddToCart,\n  onProductClick,\n  addToCartLabel,\n  unavailablePriceLabel,\n}: PresentationProps) {\n  const available = isAvailableMoney(item.price)\n  const rating = ratingValue(item)\n\n  return (\n    <Card\n      className={cn(\n        'group overflow-hidden py-4 shadow-none transition-all hover:shadow-lg',\n        onProductClick && 'cursor-pointer',\n      )}\n      onClick={onProductClick ? () => onProductClick(item) : undefined}\n    >\n      <CardContent className='flex flex-col gap-4 px-4'>\n        <div className='relative aspect-square overflow-hidden rounded-md'>\n          {item.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              {item.badge}\n            </span>\n          )}\n          {item.image ? (\n            <img\n              src={item.image}\n              alt={item.imageAlt ?? item.title}\n              width={400}\n              height={400}\n              className='size-full object-cover transition-transform duration-300 group-hover:scale-105'\n              loading='lazy'\n            />\n          ) : (\n            <div data-slot='product-image-placeholder' aria-hidden='true' className='bg-muted size-full' />\n          )}\n        </div>\n\n        <div className='flex flex-col gap-2'>\n          <h3 className='line-clamp-1 text-lg font-semibold text-balance'>{item.title}</h3>\n          {rating !== undefined && <RatingRow value={rating} />}\n          <div className='flex items-center justify-between gap-2'>\n            <PriceRow item={item} unavailablePriceLabel={unavailablePriceLabel} />\n            {hideAddToCart ? null : (\n              <Button\n                variant='ghost'\n                size='icon'\n                className='size-8 shrink-0 cursor-pointer'\n                aria-label={addToCartLabel}\n                disabled={!available}\n                onClick={(e) => {\n                  e.stopPropagation()\n                  onAddToCart?.(item)\n                }}\n              >\n                <ShoppingCart className='size-4' aria-hidden='true' />\n              </Button>\n            )}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nfunction WishlistHeart({\n  item,\n  wishlisted,\n  onToggleWishlist,\n  addToWishlistLabel,\n  removeFromWishlistLabel,\n}: {\n  item: ProductPresentation\n  wishlisted: boolean\n  onToggleWishlist?: (item: ProductPresentation, nextState: boolean) => void\n  addToWishlistLabel: string\n  removeFromWishlistLabel: string\n}) {\n  return (\n    <Button\n      variant='ghost'\n      size='icon'\n      className='bg-background/80 absolute end-2 top-2 z-20 size-8 cursor-pointer rounded-full p-0 backdrop-blur-xs disabled:cursor-not-allowed'\n      aria-label={wishlisted ? removeFromWishlistLabel : addToWishlistLabel}\n      aria-pressed={wishlisted}\n      disabled={!onToggleWishlist}\n      onClick={(e) => {\n        e.stopPropagation()\n        onToggleWishlist?.(item, !wishlisted)\n      }}\n    >\n      <Heart\n        className={cn(\n          'size-4 transition-colors',\n          wishlisted ? 'fill-destructive text-destructive' : 'fill-transparent text-muted-foreground',\n        )}\n        aria-hidden='true'\n      />\n    </Button>\n  )\n}\n\nfunction RichPresentation({\n  item,\n  hideAddToCart = false,\n  wishlisted = false,\n  onAddToCart,\n  onProductClick,\n  onToggleWishlist,\n  onViewSimilar,\n  addToCartLabel,\n  unavailablePriceLabel,\n  addToWishlistLabel,\n  removeFromWishlistLabel,\n  viewSimilarLabel,\n}: PresentationProps) {\n  const available = isAvailableMoney(item.price)\n  const rating = ratingValue(item)\n\n  return (\n    <Card\n      className={cn(\n        'relative overflow-hidden rounded-md py-0 shadow-none transition-all hover:shadow-md',\n        onProductClick && 'cursor-pointer',\n      )}\n      onClick={onProductClick ? () => onProductClick(item) : undefined}\n    >\n      <CardContent className='px-0'>\n        <div className='relative aspect-square w-full overflow-hidden'>\n          {item.image ? (\n            <img\n              src={item.image}\n              alt={item.imageAlt ?? item.title}\n              className='size-full object-cover'\n              loading='lazy'\n            />\n          ) : (\n            <div data-slot='product-image-placeholder' aria-hidden='true' className='bg-muted size-full' />\n          )}\n\n          {item.badge && (\n            <Badge className='absolute start-2 top-2 z-20 flex items-center gap-1 px-2 py-1 font-semibold text-white backdrop-blur-xs'>\n              {item.badge}\n            </Badge>\n          )}\n\n          {rating !== undefined && (\n            <div className='bg-background/80 absolute start-2 bottom-2 z-10 flex items-center gap-1 rounded-md border px-2 py-1 text-sm backdrop-blur-xs'>\n              <Star className='fill-foreground text-foreground size-4' aria-hidden='true' />\n              <span>{rating.toFixed(1)}</span>\n            </div>\n          )}\n\n          {onViewSimilar && (\n            <div className='group absolute end-2 bottom-2 z-10'>\n              <Button\n                variant='ghost'\n                size='sm'\n                className='group bg-background/80 hover:bg-background h-8 cursor-pointer overflow-hidden rounded-full p-0 px-3 text-xs shadow-xs backdrop-blur-xs transition-all duration-200'\n                aria-label={viewSimilarLabel}\n                onClick={(e) => {\n                  e.stopPropagation()\n                  onViewSimilar(item)\n                }}\n              >\n                <GalleryHorizontalEnd className='absolute start-2 size-4 shrink-0' aria-hidden='true' />\n                <span className='ms-6 whitespace-nowrap text-xs opacity-0 group-hover:opacity-100'>\n                  {viewSimilarLabel}\n                </span>\n              </Button>\n            </div>\n          )}\n\n          <WishlistHeart\n            item={item}\n            wishlisted={wishlisted}\n            onToggleWishlist={onToggleWishlist}\n            addToWishlistLabel={addToWishlistLabel}\n            removeFromWishlistLabel={removeFromWishlistLabel}\n          />\n        </div>\n\n        <div className='flex flex-col gap-2 p-4'>\n          <h3 className='font-medium text-balance'>{item.title}</h3>\n          <PriceRow item={item} unavailablePriceLabel={unavailablePriceLabel} />\n          {hideAddToCart ? null : (\n            <Button\n              variant='outline'\n              size='sm'\n              className='mt-2 w-full cursor-pointer text-xs'\n              disabled={!available}\n              onClick={(e) => {\n                e.stopPropagation()\n                onAddToCart?.(item)\n              }}\n            >\n              {addToCartLabel}\n            </Button>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\n/**\n * Canonical product card — the item cell of a product listing. Renders only\n * the canonical `ProductPresentation` contract (canonical `Money`) with\n * host-supplied evidence (rating, badge, compare-at); it owns no listing state\n * and reports every action through its callbacks. Prices render through the\n * canonical `formatMoney` path, so a missing price is an unavailable state,\n * never a zero amount.\n */\nexport function ProductCard({\n  item,\n  presentation = 'classic',\n  wishlisted,\n  hideAddToCart,\n  onAddToCart,\n  onProductClick,\n  onToggleWishlist,\n  onViewSimilar,\n  addToCartLabel = 'Agregar al carrito',\n  unavailablePriceLabel = 'Precio no disponible',\n  addToWishlistLabel = 'Añadir a favoritos',\n  removeFromWishlistLabel = 'Quitar de favoritos',\n  viewSimilarLabel = 'Ver similares',\n}: ProductCardProps) {\n  const shared: PresentationProps = {\n    item,\n    presentation,\n    wishlisted,\n    hideAddToCart,\n    onAddToCart,\n    onProductClick,\n    onToggleWishlist,\n    onViewSimilar,\n    addToCartLabel,\n    unavailablePriceLabel,\n    addToWishlistLabel,\n    removeFromWishlistLabel,\n    viewSimilarLabel,\n  }\n\n  if (presentation === 'minimal') return <MinimalPresentation {...shared} />\n  if (presentation === 'rich') return <RichPresentation {...shared} />\n  return <ClassicPresentation {...shared} />\n}\n\nexport default ProductCard\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/product-list/product-grid.d.ts

@@ -0,0 +1,28 @@
+import type { ProductGridSpecProps, ProductPresentation } from '../../../lib/contracts';
+/**
+ * Props for the canonical `ProductGrid` listing. The serializable spec props
+ * (`ProductGridSpecProps`) plus the runtime-only action callbacks and label
+ * strings, which the grid forwards to each cell.
+ */
+export interface ProductGridProps extends ProductGridSpecProps {
+    onAddToCart?: (item: ProductPresentation) => void;
+    onProductClick?: (item: ProductPresentation) => void;
+    /** Host-owned wishlist toggle; reports the item and the next state. */
+    onToggleWishlist?: (item: ProductPresentation, nextState: boolean) => void;
+    onViewSimilar?: (item: ProductPresentation) => void;
+    addToCartLabel?: string;
+    /** Shown when a price is present but unavailable (never a zero amount). */
+    unavailablePriceLabel?: string;
+    addToWishlistLabel?: string;
+    removeFromWishlistLabel?: string;
+    viewSimilarLabel?: string;
+}
+/**
+ * Canonical product grid — the listing that renders a collection of product
+ * items as a grid of `ProductCard` item cells. It owns the section chrome
+ * (heading), the responsive layout, the item cap, wishlist membership
+ * resolution, and the loading/empty/ready states; the host owns data errors.
+ */
+export declare function ProductGrid({ items, presentation, heading, maxItems, wishlistedIds, loading, skeletonCount, emptyLabel, onAddToCart, onProductClick, onToggleWishlist, onViewSimilar, addToCartLabel, unavailablePriceLabel, addToWishlistLabel, removeFromWishlistLabel, viewSimilarLabel, }: ProductGridProps): import("react").JSX.Element;
+export default ProductGrid;
+//# sourceMappingURL=product-grid.d.ts.map

package/dist/blocks/e-commerce/product-list/product-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-grid.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/product-list/product-grid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAGvF;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB;IAC5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACjD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACpD,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACnD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,2EAA2E;IAC3E,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAcD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,OAAe,EACf,aAAiB,EACjB,UAA6C,EAC7C,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,gBAAgB,GACjB,EAAE,gBAAgB,+BAgDlB;AAED,eAAe,WAAW,CAAA"}

package/dist/blocks/e-commerce/product-list/product-grid.js

@@ -0,0 +1,92 @@
+"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_grid_exports = {};
+__export(product_grid_exports, {
+  ProductGrid: () => ProductGrid,
+  default: () => product_grid_default
+});
+module.exports = __toCommonJS(product_grid_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_skeleton = require("../../../ui/skeleton.js");
+var import_product_card = require("./product-card.js");
+const GRID_CLASSES = "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6";
+function SkeletonCell() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "aspect-square w-full rounded-md" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-3/4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-1/3" })
+  ] });
+}
+function ProductGrid({
+  items,
+  presentation,
+  heading,
+  maxItems,
+  wishlistedIds,
+  loading = false,
+  skeletonCount = 6,
+  emptyLabel = "No hay productos para mostrar.",
+  onAddToCart,
+  onProductClick,
+  onToggleWishlist,
+  onViewSimilar,
+  addToCartLabel,
+  unavailablePriceLabel,
+  addToWishlistLabel,
+  removeFromWishlistLabel,
+  viewSimilarLabel
+}) {
+  const displayedItems = maxItems !== void 0 ? items.slice(0, maxItems) : items;
+  let body;
+  if (loading) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "status", "aria-busy": "true", className: GRID_CLASSES, children: Array.from({ length: skeletonCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonCell, {}, index)) });
+  } else if (displayedItems.length === 0) {
+    body = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-center", children: emptyLabel });
+  } else {
+    body = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: GRID_CLASSES, children: displayedItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_product_card.ProductCard,
+      {
+        item,
+        presentation,
+        wishlisted: wishlistedIds ? wishlistedIds.includes(item.id) : void 0,
+        onAddToCart,
+        onProductClick,
+        onToggleWishlist,
+        onViewSimilar,
+        addToCartLabel,
+        unavailablePriceLabel,
+        addToWishlistLabel,
+        removeFromWishlistLabel,
+        viewSimilarLabel
+      },
+      item.id
+    )) });
+  }
+  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-8 text-center text-2xl font-bold text-balance md:text-3xl", children: heading }),
+    body
+  ] }) });
+}
+var product_grid_default = ProductGrid;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProductGrid
+});
+//# sourceMappingURL=product-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-list/product-grid.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\n\nimport { Skeleton } from '../../../ui/skeleton'\nimport type { ProductGridSpecProps, ProductPresentation } from '../../../lib/contracts'\nimport { ProductCard } from './product-card'\n\n/**\n * Props for the canonical `ProductGrid` listing. The serializable spec props\n * (`ProductGridSpecProps`) plus the runtime-only action callbacks and label\n * strings, which the grid forwards to each cell.\n */\nexport interface ProductGridProps extends ProductGridSpecProps {\n  onAddToCart?: (item: ProductPresentation) => void\n  onProductClick?: (item: ProductPresentation) => void\n  /** Host-owned wishlist toggle; reports the item and the next state. */\n  onToggleWishlist?: (item: ProductPresentation, nextState: boolean) => void\n  onViewSimilar?: (item: ProductPresentation) => void\n  addToCartLabel?: string\n  /** Shown when a price is present but unavailable (never a zero amount). */\n  unavailablePriceLabel?: string\n  addToWishlistLabel?: string\n  removeFromWishlistLabel?: string\n  viewSimilarLabel?: string\n}\n\nconst GRID_CLASSES = 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'\n\nfunction SkeletonCell() {\n  return (\n    <div className='flex flex-col gap-3'>\n      <Skeleton className='aspect-square w-full rounded-md' />\n      <Skeleton className='h-4 w-3/4' />\n      <Skeleton className='h-4 w-1/3' />\n    </div>\n  )\n}\n\n/**\n * Canonical product grid — the listing that renders a collection of product\n * items as a grid of `ProductCard` item cells. It owns the section chrome\n * (heading), the responsive layout, the item cap, wishlist membership\n * resolution, and the loading/empty/ready states; the host owns data errors.\n */\nexport function ProductGrid({\n  items,\n  presentation,\n  heading,\n  maxItems,\n  wishlistedIds,\n  loading = false,\n  skeletonCount = 6,\n  emptyLabel = 'No hay productos para mostrar.',\n  onAddToCart,\n  onProductClick,\n  onToggleWishlist,\n  onViewSimilar,\n  addToCartLabel,\n  unavailablePriceLabel,\n  addToWishlistLabel,\n  removeFromWishlistLabel,\n  viewSimilarLabel,\n}: ProductGridProps) {\n  const displayedItems = maxItems !== undefined ? items.slice(0, maxItems) : items\n\n  let body: ReactNode\n  if (loading) {\n    body = (\n      <div role='status' aria-busy='true' className={GRID_CLASSES}>\n        {Array.from({ length: skeletonCount }, (_, index) => (\n          <SkeletonCell key={index} />\n        ))}\n      </div>\n    )\n  } else if (displayedItems.length === 0) {\n    body = <p className='text-muted-foreground text-center'>{emptyLabel}</p>\n  } else {\n    body = (\n      <div className={GRID_CLASSES}>\n        {displayedItems.map((item) => (\n          <ProductCard\n            key={item.id}\n            item={item}\n            presentation={presentation}\n            wishlisted={wishlistedIds ? wishlistedIds.includes(item.id) : undefined}\n            onAddToCart={onAddToCart}\n            onProductClick={onProductClick}\n            onToggleWishlist={onToggleWishlist}\n            onViewSimilar={onViewSimilar}\n            addToCartLabel={addToCartLabel}\n            unavailablePriceLabel={unavailablePriceLabel}\n            addToWishlistLabel={addToWishlistLabel}\n            removeFromWishlistLabel={removeFromWishlistLabel}\n            viewSimilarLabel={viewSimilarLabel}\n          />\n        ))}\n      </div>\n    )\n  }\n\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-8 text-center text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>\n        )}\n        {body}\n      </div>\n    </section>\n  )\n}\n\nexport default ProductGrid\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BI;AA3BJ,sBAAyB;AAEzB,0BAA4B;AAqB5B,MAAM,eAAe;AAErB,SAAS,eAAe;AACtB,SACE,6CAAC,SAAI,WAAU,uBACb;AAAA,gDAAC,4BAAS,WAAU,mCAAkC;AAAA,IACtD,4CAAC,4BAAS,WAAU,aAAY;AAAA,IAChC,4CAAC,4BAAS,WAAU,aAAY;AAAA,KAClC;AAEJ;AAQO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,iBAAiB,aAAa,SAAY,MAAM,MAAM,GAAG,QAAQ,IAAI;AAE3E,MAAI;AACJ,MAAI,SAAS;AACX,WACE,4CAAC,SAAI,MAAK,UAAS,aAAU,QAAO,WAAW,cAC5C,gBAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,CAAC,GAAG,UACzC,4CAAC,kBAAkB,KAAO,CAC3B,GACH;AAAA,EAEJ,WAAW,eAAe,WAAW,GAAG;AACtC,WAAO,4CAAC,OAAE,WAAU,qCAAqC,sBAAW;AAAA,EACtE,OAAO;AACL,WACE,4CAAC,SAAI,WAAW,cACb,yBAAe,IAAI,CAAC,SACnB;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA;AAAA,QACA,YAAY,gBAAgB,cAAc,SAAS,KAAK,EAAE,IAAI;AAAA,QAC9D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,MAZK,KAAK;AAAA,IAaZ,CACD,GACH;AAAA,EAEJ;AAEA,SACE,4CAAC,aAAQ,WAAU,SACjB,uDAAC,SAAI,WAAU,iDACZ;AAAA,eACC,4CAAC,QAAG,WAAU,gEAAgE,mBAAQ;AAAA,IAEvF;AAAA,KACH,GACF;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/blocks/e-commerce/product-list/product-grid.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { ProductCard } from "./product-card.mjs";
+const GRID_CLASSES = "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6";
+function SkeletonCell() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full rounded-md" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" })
+  ] });
+}
+function ProductGrid({
+  items,
+  presentation,
+  heading,
+  maxItems,
+  wishlistedIds,
+  loading = false,
+  skeletonCount = 6,
+  emptyLabel = "No hay productos para mostrar.",
+  onAddToCart,
+  onProductClick,
+  onToggleWishlist,
+  onViewSimilar,
+  addToCartLabel,
+  unavailablePriceLabel,
+  addToWishlistLabel,
+  removeFromWishlistLabel,
+  viewSimilarLabel
+}) {
+  const displayedItems = maxItems !== void 0 ? items.slice(0, maxItems) : items;
+  let body;
+  if (loading) {
+    body = /* @__PURE__ */ jsx("div", { role: "status", "aria-busy": "true", className: GRID_CLASSES, children: Array.from({ length: skeletonCount }, (_, index) => /* @__PURE__ */ jsx(SkeletonCell, {}, index)) });
+  } else if (displayedItems.length === 0) {
+    body = /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-center", children: emptyLabel });
+  } else {
+    body = /* @__PURE__ */ jsx("div", { className: GRID_CLASSES, children: displayedItems.map((item) => /* @__PURE__ */ jsx(
+      ProductCard,
+      {
+        item,
+        presentation,
+        wishlisted: wishlistedIds ? wishlistedIds.includes(item.id) : void 0,
+        onAddToCart,
+        onProductClick,
+        onToggleWishlist,
+        onViewSimilar,
+        addToCartLabel,
+        unavailablePriceLabel,
+        addToWishlistLabel,
+        removeFromWishlistLabel,
+        viewSimilarLabel
+      },
+      item.id
+    )) });
+  }
+  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-8 text-center text-2xl font-bold text-balance md:text-3xl", children: heading }),
+    body
+  ] }) });
+}
+var product_grid_default = ProductGrid;
+export {
+  ProductGrid,
+  product_grid_default as default
+};
+//# sourceMappingURL=product-grid.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-list/product-grid.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\n\nimport { Skeleton } from '../../../ui/skeleton'\nimport type { ProductGridSpecProps, ProductPresentation } from '../../../lib/contracts'\nimport { ProductCard } from './product-card'\n\n/**\n * Props for the canonical `ProductGrid` listing. The serializable spec props\n * (`ProductGridSpecProps`) plus the runtime-only action callbacks and label\n * strings, which the grid forwards to each cell.\n */\nexport interface ProductGridProps extends ProductGridSpecProps {\n  onAddToCart?: (item: ProductPresentation) => void\n  onProductClick?: (item: ProductPresentation) => void\n  /** Host-owned wishlist toggle; reports the item and the next state. */\n  onToggleWishlist?: (item: ProductPresentation, nextState: boolean) => void\n  onViewSimilar?: (item: ProductPresentation) => void\n  addToCartLabel?: string\n  /** Shown when a price is present but unavailable (never a zero amount). */\n  unavailablePriceLabel?: string\n  addToWishlistLabel?: string\n  removeFromWishlistLabel?: string\n  viewSimilarLabel?: string\n}\n\nconst GRID_CLASSES = 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'\n\nfunction SkeletonCell() {\n  return (\n    <div className='flex flex-col gap-3'>\n      <Skeleton className='aspect-square w-full rounded-md' />\n      <Skeleton className='h-4 w-3/4' />\n      <Skeleton className='h-4 w-1/3' />\n    </div>\n  )\n}\n\n/**\n * Canonical product grid — the listing that renders a collection of product\n * items as a grid of `ProductCard` item cells. It owns the section chrome\n * (heading), the responsive layout, the item cap, wishlist membership\n * resolution, and the loading/empty/ready states; the host owns data errors.\n */\nexport function ProductGrid({\n  items,\n  presentation,\n  heading,\n  maxItems,\n  wishlistedIds,\n  loading = false,\n  skeletonCount = 6,\n  emptyLabel = 'No hay productos para mostrar.',\n  onAddToCart,\n  onProductClick,\n  onToggleWishlist,\n  onViewSimilar,\n  addToCartLabel,\n  unavailablePriceLabel,\n  addToWishlistLabel,\n  removeFromWishlistLabel,\n  viewSimilarLabel,\n}: ProductGridProps) {\n  const displayedItems = maxItems !== undefined ? items.slice(0, maxItems) : items\n\n  let body: ReactNode\n  if (loading) {\n    body = (\n      <div role='status' aria-busy='true' className={GRID_CLASSES}>\n        {Array.from({ length: skeletonCount }, (_, index) => (\n          <SkeletonCell key={index} />\n        ))}\n      </div>\n    )\n  } else if (displayedItems.length === 0) {\n    body = <p className='text-muted-foreground text-center'>{emptyLabel}</p>\n  } else {\n    body = (\n      <div className={GRID_CLASSES}>\n        {displayedItems.map((item) => (\n          <ProductCard\n            key={item.id}\n            item={item}\n            presentation={presentation}\n            wishlisted={wishlistedIds ? wishlistedIds.includes(item.id) : undefined}\n            onAddToCart={onAddToCart}\n            onProductClick={onProductClick}\n            onToggleWishlist={onToggleWishlist}\n            onViewSimilar={onViewSimilar}\n            addToCartLabel={addToCartLabel}\n            unavailablePriceLabel={unavailablePriceLabel}\n            addToWishlistLabel={addToWishlistLabel}\n            removeFromWishlistLabel={removeFromWishlistLabel}\n            viewSimilarLabel={viewSimilarLabel}\n          />\n        ))}\n      </div>\n    )\n  }\n\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-8 text-center text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>\n        )}\n        {body}\n      </div>\n    </section>\n  )\n}\n\nexport default ProductGrid\n"],"mappings":";AA+BI,SACE,KADF;AA3BJ,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAqB5B,MAAM,eAAe;AAErB,SAAS,eAAe;AACtB,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,YAAS,WAAU,mCAAkC;AAAA,IACtD,oBAAC,YAAS,WAAU,aAAY;AAAA,IAChC,oBAAC,YAAS,WAAU,aAAY;AAAA,KAClC;AAEJ;AAQO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,iBAAiB,aAAa,SAAY,MAAM,MAAM,GAAG,QAAQ,IAAI;AAE3E,MAAI;AACJ,MAAI,SAAS;AACX,WACE,oBAAC,SAAI,MAAK,UAAS,aAAU,QAAO,WAAW,cAC5C,gBAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,CAAC,GAAG,UACzC,oBAAC,kBAAkB,KAAO,CAC3B,GACH;AAAA,EAEJ,WAAW,eAAe,WAAW,GAAG;AACtC,WAAO,oBAAC,OAAE,WAAU,qCAAqC,sBAAW;AAAA,EACtE,OAAO;AACL,WACE,oBAAC,SAAI,WAAW,cACb,yBAAe,IAAI,CAAC,SACnB;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA;AAAA,QACA,YAAY,gBAAgB,cAAc,SAAS,KAAK,EAAE,IAAI;AAAA,QAC9D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,MAZK,KAAK;AAAA,IAaZ,CACD,GACH;AAAA,EAEJ;AAEA,SACE,oBAAC,aAAQ,WAAU,SACjB,+BAAC,SAAI,WAAU,iDACZ;AAAA,eACC,oBAAC,QAAG,WAAU,gEAAgE,mBAAQ;AAAA,IAEvF;AAAA,KACH,GACF;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

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

@@ -0,0 +1,30 @@
+import type { ProductPresentation } from '../../../lib/contracts';
+export interface ProductShowcase1Props {
+    products: ProductPresentation[];
+    heading?: string;
+    description?: string;
+    pageSize?: number;
+    prevLabel?: string;
+    nextLabel?: string;
+    /** Label for the current-page status, e.g. "Página". */
+    pageLabel?: string;
+    unavailablePriceLabel?: string;
+    emptyLabel?: string;
+    addToCartLabel?: string;
+    onAddToCart?: (product: ProductPresentation) => void;
+    onProductClick?: (product: ProductPresentation) => void;
+}
+/**
+ * Combined grid-and-carousel product presentation: fixed-size grid pages
+ * navigated manually (prev/next) with a visible current-page indication. There
+ * is no autoplay, no auto-advance, and no infinite loop. Controls are real
+ * buttons (keyboard operable and visible at every breakpoint); touch swipe is an
+ * addition, never the only way to navigate. Below-fold images are lazy.
+ *
+ * Data access lives in the host: this block only renders the props it receives
+ * and reports interactions through callbacks (no backend/router/measurement
+ * imports).
+ */
+export declare function ProductShowcase1({ products, heading, description, pageSize, prevLabel, nextLabel, pageLabel, unavailablePriceLabel, emptyLabel, addToCartLabel, onAddToCart, onProductClick, }: ProductShowcase1Props): import("react").JSX.Element;
+export default ProductShowcase1;
+//# sourceMappingURL=product-showcase-1.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-showcase-1.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/product-list/product-showcase-1.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAEjE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,mBAAmB,EAAE,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACpD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAA;CACxD;AAuBD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,WAAW,EACX,QAA4B,EAC5B,SAAsB,EACtB,SAAuB,EACvB,SAAoB,EACpB,qBAA8C,EAC9C,UAA6C,EAC7C,cAAqC,EACrC,WAAW,EACX,cAAc,GACf,EAAE,qBAAqB,+BA0MvB;AAED,eAAe,gBAAgB,CAAA"}