@thorprovider/blocks 2.0.0 → 3.0.0

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

@@ -0,0 +1,361 @@
+"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_card_exports = {};
+__export(product_card_exports, {
+  ProductCard: () => ProductCard,
+  default: () => product_card_default
+});
+module.exports = __toCommonJS(product_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_react = require("motion/react");
+var import_badge = require("../../../ui/badge.js");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_utils = require("../../../lib/utils.js");
+var import_money = require("../../../lib/money.js");
+function compareAtText(item) {
+  const compareAt = item.compareAtPrice;
+  if (!compareAt) return void 0;
+  const formatted = (0, import_money.formatMoney)(compareAt);
+  const price = (0, import_money.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 = (0, import_money.isAvailableMoney)(item.price);
+  const compareAt = compareAtText(item);
+  return /* @__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: available ? (0, import_money.formatMoney)(item.price) : unavailablePriceLabel }),
+    compareAt && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-muted-foreground 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: value.toFixed(1) })
+  ] });
+}
+function ClassicPresentation({
+  item,
+  hideAddToCart = false,
+  onAddToCart,
+  onProductClick,
+  addToCartLabel,
+  unavailablePriceLabel
+}) {
+  const reduceMotion = (0, import_react.useReducedMotion)();
+  const available = (0, import_money.isAvailableMoney)(item.price);
+  const rating = ratingValue(item);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react.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__ */ (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(item) : 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: [
+                item.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: item.badge }),
+                item.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    src: item.image,
+                    alt: item.imageAlt ?? item.title,
+                    className: "size-full rounded-md object-contain",
+                    loading: "lazy",
+                    width: 400,
+                    height: 400
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "product-image-placeholder", "aria-hidden": "true", className: "bg-muted size-full rounded-md" })
+              ] }),
+              /* @__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: (e) => {
+                      e.stopPropagation();
+                      onProductClick(item);
+                    },
+                    className: "hover:text-primary cursor-pointer text-left transition-colors",
+                    children: item.title
+                  }
+                ) : item.title }),
+                rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RatingRow, { value: rating }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PriceRow, { item, unavailablePriceLabel })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardFooter, { className: "bg-transparent px-3 pt-0 border-t-0 md:px-4", children: hideAddToCart ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.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 = (0, import_money.isAvailableMoney)(item.price);
+  const rating = ratingValue(item);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_card.Card,
+    {
+      className: (0, import_utils.cn)(
+        "group overflow-hidden py-4 shadow-none transition-all hover:shadow-lg",
+        onProductClick && "cursor-pointer"
+      ),
+      onClick: onProductClick ? () => onProductClick(item) : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "flex flex-col gap-4 px-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-square overflow-hidden rounded-md", children: [
+          item.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: item.badge }),
+          item.image ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "product-image-placeholder", "aria-hidden": "true", className: "bg-muted size-full" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "line-clamp-1 text-lg font-semibold text-balance", children: item.title }),
+          rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RatingRow, { value: rating }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PriceRow, { item, unavailablePriceLabel }),
+            hideAddToCart ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShoppingCart, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function WishlistHeart({
+  item,
+  wishlisted,
+  onToggleWishlist,
+  addToWishlistLabel,
+  removeFromWishlistLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.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__ */ (0, import_jsx_runtime.jsx)(
+        import_lucide_react.Heart,
+        {
+          className: (0, import_utils.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 = (0, import_money.isAvailableMoney)(item.price);
+  const rating = ratingValue(item);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_card.Card,
+    {
+      className: (0, import_utils.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__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "px-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-square w-full overflow-hidden", children: [
+          item.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: item.image,
+              alt: item.imageAlt ?? item.title,
+              className: "size-full object-cover",
+              loading: "lazy"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "product-image-placeholder", "aria-hidden": "true", className: "bg-muted size-full" }),
+          item.badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Star, { className: "fill-foreground text-foreground size-4", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: rating.toFixed(1) })
+          ] }),
+          onViewSimilar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "group absolute end-2 bottom-2 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_button.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.GalleryHorizontalEnd, { className: "absolute start-2 size-4 shrink-0", "aria-hidden": "true" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ms-6 whitespace-nowrap text-xs opacity-0 group-hover:opacity-100", children: viewSimilarLabel })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            WishlistHeart,
+            {
+              item,
+              wishlisted,
+              onToggleWishlist,
+              addToWishlistLabel,
+              removeFromWishlistLabel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-medium text-balance", children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PriceRow, { item, unavailablePriceLabel }),
+          hideAddToCart ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.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__ */ (0, import_jsx_runtime.jsx)(MinimalPresentation, { ...shared });
+  if (presentation === "rich") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RichPresentation, { ...shared });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClassicPresentation, { ...shared });
+}
+var product_card_default = ProductCard;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProductCard
+});
+//# sourceMappingURL=product-card.js.map

package/dist/blocks/e-commerce/product-list/product-card.js.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":[]}