@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -0,0 +1,844 @@
+"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_overview_exports = {};
+__export(product_overview_exports, {
+  ProductOverviewGallery: () => import_product_overview_gallery.ProductOverviewGallery,
+  ProductOverviewLightboxTab: () => import_product_overview_lightbox_tab.ProductOverviewLightboxTab,
+  ProductOverviewReviewsTab: () => import_product_overview_reviews_tab.ProductOverviewReviewsTab,
+  default: () => ProductOverview,
+  galleryImages: () => galleryImages,
+  resolveAddToCartPayload: () => resolveAddToCartPayload,
+  variantLabelOf: () => variantLabelOf
+});
+module.exports = __toCommonJS(product_overview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_separator = require("../../../ui/separator.js");
+var import_utils = require("../../../lib/utils.js");
+var import_contracts = require("../../../lib/contracts.js");
+var import_money = require("../../../lib/money.js");
+var import_reaction_toggle = require("../../shared/reaction-toggle.js");
+var import_carousel = require("../../../ui/carousel.js");
+var import_product_overview_gallery = require("./product-overview-gallery.js");
+var import_product_overview_lightbox_tab = require("./product-overview-lightbox-tab.js");
+var import_product_overview_reviews_tab = require("./product-overview-reviews-tab.js");
+var import_product_overview_tabs = require("./product-overview-tabs.js");
+function variantLabelOf(variant) {
+  if (variant.title.trim() !== "") return variant.title;
+  return variant.selectedOptions.map((option) => option.value).join(" / ");
+}
+function resolveAddToCartPayload(variant, quantity) {
+  if (!variant) return null;
+  return {
+    variantId: variant.id,
+    quantity: typeof quantity === "number" && quantity > 0 ? quantity : 1
+  };
+}
+function galleryImages(product, fallback) {
+  const images = product.images.map((image) => image.url).filter((url) => typeof url === "string" && url.trim() !== "");
+  if (images.length > 0) return images;
+  const featured = product.featuredImage?.url;
+  if (typeof featured === "string" && featured.trim() !== "") return [featured];
+  return [fallback];
+}
+function ProductOverview({
+  product,
+  presentation = "standard",
+  selectedVariantId,
+  onSelectVariant,
+  quantity,
+  onQuantityChange,
+  onAddToCart,
+  isWishlisted = false,
+  onToggleWishlist,
+  onShare,
+  rating,
+  deliveryEstimate,
+  shipping,
+  formatPrice,
+  specifications,
+  features,
+  reviews,
+  sizesLabel = "Variantes",
+  variantLabel = "Variante",
+  reviewsLabel = "Rese\xF1as",
+  addToCartLabel = "Agregar al carrito",
+  outOfStockLabel = "Agotado",
+  unavailablePriceLabel = "Precio no disponible",
+  selectVariantLabel = "Selecciona una variante",
+  quantityLabel = "Cantidad",
+  deliveryEstimateLabel = "Entrega estimada",
+  shippingLabel = "Env\xEDo",
+  removeFromWishlistLabel = "Quitar de favoritos",
+  addToWishlistLabel = "Agregar a favoritos",
+  imageFallback = import_contracts.PRODUCT_IMAGE_FALLBACK,
+  badgeLabel,
+  availabilityLabel = "Disponible",
+  skuLabel = "SKU",
+  overviewLabel = "Resumen",
+  specsLabel = "Especificaciones",
+  featuresLabel = "Caracter\xEDsticas clave",
+  specificationsLabel = "Especificaciones t\xE9cnicas",
+  galleryLabel = "Galer\xEDa",
+  photosLabel = "fotos",
+  saveLabel = "Guardar",
+  savedLabel = "Guardado",
+  shareLabel = "Compartir",
+  basedOnReviewsLabel = "Basado en {count} rese\xF1as",
+  foundHelpfulLabel = "{count} personas encontraron esto \xFAtil",
+  ofCounterLabel = "{current} de {total}",
+  freeDeliveryLabel
+}) {
+  const [selectedImage, setSelectedImage] = (0, import_react.useState)(0);
+  const [carouselApi, setCarouselApi] = (0, import_react.useState)();
+  (0, import_react.useEffect)(() => {
+    if (!carouselApi) return;
+    carouselApi.scrollTo(selectedImage);
+    const handleSelect = () => setSelectedImage(carouselApi.selectedScrollSnap());
+    carouselApi.on("select", handleSelect);
+    return () => {
+      carouselApi.off("select", handleSelect);
+    };
+  }, [carouselApi, selectedImage]);
+  const selectedVariant = selectedVariantId != null ? product.variants.find((variant) => variant.id === selectedVariantId) ?? null : null;
+  const selectedPrice = selectedVariant?.price;
+  const selectedCompareAt = selectedVariant?.compareAtPrice;
+  const priceAvailable = (0, import_money.isAvailableMoney)(selectedPrice);
+  const compareAtAvailable = (0, import_money.isAvailableMoney)(selectedCompareAt);
+  const canPurchase = Boolean(selectedVariant?.availableForSale) && priceAvailable;
+  const quantityValue = quantity ?? 1;
+  const addPayload = resolveAddToCartPayload(selectedVariant, quantityValue);
+  const images = galleryImages(product, imageFallback);
+  const hasRealImages = images[0] !== imageFallback || product.featuredImage != null;
+  const activeImage = images[Math.min(selectedImage, images.length - 1)];
+  const selection = {
+    selectedVariant,
+    selectedPrice,
+    selectedCompareAt,
+    priceAvailable,
+    compareAtAvailable,
+    canPurchase,
+    quantityValue,
+    addPayload
+  };
+  const handleAddToCart = () => {
+    if (onAddToCart && addPayload) onAddToCart(addPayload.variantId, addPayload.quantity);
+  };
+  const handleToggleWishlist = () => {
+    if (!selectedVariant || !onToggleWishlist) return;
+    onToggleWishlist(selectedVariant.id, !isWishlisted);
+  };
+  if (presentation === "gallery") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      GalleryPresentation,
+      {
+        product,
+        selection,
+        images,
+        activeImage,
+        selectedImage,
+        onSelectImage: setSelectedImage,
+        setCarouselApi,
+        onSelectVariant,
+        onQuantityChange,
+        onAddToCart: handleAddToCart,
+        isWishlisted,
+        onToggleWishlist: onToggleWishlist ? handleToggleWishlist : void 0,
+        rating,
+        formatPrice,
+        labels: {
+          reviewsLabel,
+          addToCartLabel,
+          outOfStockLabel,
+          unavailablePriceLabel,
+          selectVariantLabel,
+          quantityLabel,
+          removeFromWishlistLabel,
+          addToWishlistLabel,
+          freeDeliveryLabel
+        }
+      }
+    );
+  }
+  if (presentation === "rich") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      RichPresentation,
+      {
+        product,
+        selection,
+        images,
+        selectedImage,
+        onSelectImage: setSelectedImage,
+        onSelectVariant,
+        onQuantityChange,
+        onAddToCart: handleAddToCart,
+        isWishlisted,
+        onToggleWishlist: onToggleWishlist ? handleToggleWishlist : void 0,
+        onShare,
+        rating,
+        formatPrice,
+        specifications,
+        features,
+        reviews,
+        labels: {
+          reviewsLabel,
+          addToCartLabel,
+          outOfStockLabel,
+          unavailablePriceLabel,
+          selectVariantLabel,
+          quantityLabel,
+          removeFromWishlistLabel,
+          addToWishlistLabel,
+          badgeLabel,
+          availabilityLabel,
+          skuLabel,
+          overviewLabel,
+          specsLabel,
+          featuresLabel,
+          specificationsLabel,
+          galleryLabel,
+          photosLabel,
+          saveLabel,
+          savedLabel,
+          shareLabel,
+          basedOnReviewsLabel,
+          foundHelpfulLabel,
+          ofCounterLabel
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StandardPresentation,
+    {
+      product,
+      selection,
+      images,
+      activeImage,
+      selectedImage,
+      onSelectImage: setSelectedImage,
+      onSelectVariant,
+      onQuantityChange,
+      onAddToCart: handleAddToCart,
+      isWishlisted,
+      onToggleWishlist: onToggleWishlist ? handleToggleWishlist : void 0,
+      rating,
+      deliveryEstimate,
+      shipping,
+      formatPrice,
+      hasRealImages,
+      labels: {
+        sizesLabel,
+        variantLabel,
+        reviewsLabel,
+        addToCartLabel,
+        outOfStockLabel,
+        unavailablePriceLabel,
+        selectVariantLabel,
+        quantityLabel,
+        deliveryEstimateLabel,
+        shippingLabel,
+        removeFromWishlistLabel,
+        addToWishlistLabel
+      }
+    }
+  );
+}
+function VariantSelector({
+  product,
+  selectedVariantId,
+  onSelectVariant,
+  sizesLabel,
+  variantLabel,
+  outOfStockLabel
+}) {
+  if (product.variants.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-bold", children: sizesLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-3", children: product.variants.map((variant) => {
+      const isSelected = variant.id === selectedVariantId;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_button.Button,
+        {
+          variant: isSelected ? "default" : "outline",
+          onClick: onSelectVariant ? () => onSelectVariant(variant.id) : void 0,
+          disabled: !variant.availableForSale,
+          "aria-pressed": isSelected,
+          className: "h-9 cursor-pointer rounded-full px-4",
+          children: [
+            variantLabelOf(variant),
+            !variant.availableForSale ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground ms-2 text-xs font-normal", children: outOfStockLabel }) : null
+          ]
+        },
+        variant.id
+      );
+    }) }),
+    variantLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: variantLabel }) : null
+  ] });
+}
+function QuantityStepper({
+  quantityValue,
+  quantityLabel,
+  onQuantityChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-bold", children: quantityLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border-border flex w-fit items-center rounded-md border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_button.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "size-9 rounded-r-none",
+          "aria-label": `${quantityLabel} -1`,
+          onClick: () => onQuantityChange(Math.max(1, quantityValue - 1)),
+          disabled: quantityValue <= 1,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Minus, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-10 text-center text-sm tabular-nums", children: quantityValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_button.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "size-9 rounded-l-none",
+          "aria-label": `${quantityLabel} +1`,
+          onClick: () => onQuantityChange(quantityValue + 1),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, {})
+        }
+      )
+    ] })
+  ] });
+}
+function WishlistButton({
+  isWishlisted,
+  disabled,
+  onToggleWishlist,
+  removeFromWishlistLabel,
+  addToWishlistLabel,
+  className
+}) {
+  if (!onToggleWishlist) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.Button,
+    {
+      variant: "outline",
+      size: "icon",
+      className: (0, import_utils.cn)("cursor-pointer", className),
+      disabled,
+      onClick: onToggleWishlist,
+      "aria-pressed": isWishlisted,
+      "aria-label": isWishlisted ? removeFromWishlistLabel : addToWishlistLabel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_reaction_toggle.ReactionToggle,
+        {
+          active: isWishlisted,
+          icon: import_lucide_react.Heart,
+          iconClassName: "size-5",
+          activeColorClassName: "text-primary"
+        }
+      )
+    }
+  );
+}
+function StandardPresentation({
+  product,
+  selection,
+  images,
+  activeImage,
+  selectedImage,
+  onSelectImage,
+  onSelectVariant,
+  onQuantityChange,
+  onAddToCart,
+  isWishlisted,
+  onToggleWishlist,
+  rating,
+  deliveryEstimate,
+  shipping,
+  formatPrice,
+  hasRealImages,
+  labels
+}) {
+  const { selectedVariant, selectedPrice, selectedCompareAt, priceAvailable, compareAtAvailable, canPurchase, quantityValue } = selection;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: "@container mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-6 py-4 lg:grid-cols-2 lg:gap-8 lg:py-6 xl:grid-cols-3 xl:gap-12 xl:py-12", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col justify-between gap-6 lg:gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 lg:gap-4", children: [
+        product.vendor ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold tracking-wide uppercase", children: product.vendor }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-xl font-bold tracking-tight text-balance lg:text-3xl", children: product.title }),
+        product.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-balance", children: product.description }) : null,
+        selectedVariant ? priceAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-2xl font-bold tracking-tight", children: [
+          (0, import_money.formatMoney)(selectedPrice, formatPrice),
+          compareAtAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground ms-2 text-base font-normal line-through", children: (0, import_money.formatMoney)(selectedCompareAt, formatPrice) }) : null
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.unavailablePriceLabel }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.selectVariantLabel })
+      ] }),
+      hasRealImages ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-4", children: images.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelectImage(index),
+          "aria-label": `${product.title} ${index + 1}`,
+          "aria-pressed": selectedImage === index,
+          className: (0, import_utils.cn)(
+            "ring-offset-background size-16 cursor-pointer overflow-hidden rounded-sm ring-offset-2 transition-all lg:size-18",
+            selectedImage === index && "ring-foreground ring-2"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: url || void 0, alt: "", className: "size-full object-cover" })
+        },
+        `${product.id}:image:${index}`
+      )) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "row-span-2 row-start-1 lg:col-start-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-muted aspect-square w-full overflow-hidden rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: activeImage || void 0, alt: product.title, className: "h-90 w-full object-cover" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-6 lg:gap-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        VariantSelector,
+        {
+          product,
+          selectedVariantId: selectedVariant?.id,
+          onSelectVariant,
+          sizesLabel: labels.sizesLabel,
+          variantLabel: labels.variantLabel,
+          outOfStockLabel: labels.outOfStockLabel
+        }
+      ),
+      selectedVariant && selectedVariant.selectedOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: selectedVariant.selectedOptions.map((option) => `${option.name}: ${option.value}`).join(" \xB7 ") }) : null,
+      rating ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-bold", children: labels.reviewsLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-1", "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_lucide_react.Star,
+            {
+              className: "text-foreground size-5",
+              fill: index < rating.value ? "currentColor" : "none"
+            },
+            index
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm tabular-nums", children: `${rating.value} (${rating.count})` })
+        ] })
+      ] }) : null,
+      onQuantityChange ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        QuantityStepper,
+        {
+          quantityValue,
+          quantityLabel: labels.quantityLabel,
+          onQuantityChange
+        }
+      ) : null,
+      deliveryEstimate || shipping ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", { className: "text-muted-foreground flex flex-col gap-1 text-sm", children: [
+        deliveryEstimate ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { children: labels.deliveryEstimateLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { className: "text-foreground", children: deliveryEstimate })
+        ] }) : null,
+        (0, import_money.isAvailableMoney)(shipping) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { children: labels.shippingLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { className: "text-foreground", children: (0, import_money.formatMoney)(shipping, formatPrice) })
+        ] }) : null
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            className: "h-10 flex-1 cursor-pointer rounded-full px-8",
+            size: "lg",
+            disabled: !canPurchase,
+            onClick: onAddToCart,
+            children: labels.addToCartLabel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          WishlistButton,
+          {
+            isWishlisted,
+            disabled: !selectedVariant,
+            onToggleWishlist,
+            removeFromWishlistLabel: labels.removeFromWishlistLabel,
+            addToWishlistLabel: labels.addToWishlistLabel,
+            className: "size-9 rounded-full"
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+}
+function GalleryPresentation({
+  product,
+  selection,
+  images,
+  activeImage,
+  selectedImage,
+  onSelectImage,
+  setCarouselApi,
+  onSelectVariant,
+  onQuantityChange,
+  onAddToCart,
+  isWishlisted,
+  onToggleWishlist,
+  rating,
+  formatPrice,
+  labels
+}) {
+  const { selectedVariant, selectedPrice, selectedCompareAt, priceAvailable, compareAtAvailable, canPurchase, quantityValue } = selection;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-8 py-4 md:py-6 lg:grid-cols-2 lg:py-12", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.Carousel, { setApi: setCarouselApi, className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselContent, { children: images.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-muted flex h-130 w-full items-center justify-center overflow-hidden rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: url || void 0, alt: `${product.title} ${index + 1}`, className: "h-full w-full object-cover" }) }) }, `${product.id}:carousel:${index}`)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-4", children: images.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelectImage(index),
+          "aria-label": `Mostrar imagen ${index + 1} de ${product.title}`,
+          "aria-pressed": selectedImage === index,
+          className: "aspect-square size-16 cursor-pointer",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: url || void 0,
+              alt: `${product.title} ${index + 1}`,
+              className: (0, import_utils.cn)(
+                "size-full cursor-pointer rounded-md object-cover ring-offset-2 transition-all",
+                selectedImage === index ? "ring-foreground ring-2" : ""
+              )
+            }
+          )
+        },
+        `${product.id}:thumb:${index}`
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "ghost", size: "icon", className: "bg-primary size-6 scale-75 cursor-pointer rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "text-primary-foreground size-4" }) }),
+          product.vendor ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ms-2 font-medium", children: product.vendor }) : null,
+          selectedVariant?.sku ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground ms-auto", children: selectedVariant.sku }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-xl font-bold text-balance xl:text-3xl", children: product.title }),
+        rating ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex", children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_lucide_react.Star,
+            {
+              className: (0, import_utils.cn)(
+                "size-5",
+                i < rating.value ? "fill-foreground text-foreground" : "text-muted-foreground"
+              )
+            },
+            i
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-muted-foreground text-sm", children: [
+            rating.count,
+            " ",
+            labels.reviewsLabel
+          ] })
+        ] }) : null
+      ] }),
+      selectedVariant ? priceAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-4xl font-bold", children: [
+        (0, import_money.formatMoney)(selectedPrice, formatPrice),
+        compareAtAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground ms-2 text-xl font-normal line-through", children: (0, import_money.formatMoney)(selectedCompareAt, formatPrice) }) : null
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.unavailablePriceLabel }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.selectVariantLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        VariantSelector,
+        {
+          product,
+          selectedVariantId: selectedVariant?.id,
+          onSelectVariant,
+          sizesLabel: labels.selectVariantLabel,
+          variantLabel: "",
+          outOfStockLabel: labels.outOfStockLabel
+        }
+      ),
+      onQuantityChange ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        QuantityStepper,
+        {
+          quantityValue,
+          quantityLabel: labels.quantityLabel,
+          onQuantityChange
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, { className: "h-12 flex-1 cursor-pointer rounded-md", size: "lg", disabled: !canPurchase, onClick: onAddToCart, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShoppingCart, {}),
+          labels.addToCartLabel
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          WishlistButton,
+          {
+            isWishlisted,
+            disabled: !selectedVariant,
+            onToggleWishlist,
+            removeFromWishlistLabel: labels.removeFromWishlistLabel,
+            addToWishlistLabel: labels.addToWishlistLabel,
+            className: "border-input size-12 rounded-md"
+          }
+        )
+      ] }),
+      labels.freeDeliveryLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-muted-foreground flex items-center justify-center gap-2 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Truck, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: labels.freeDeliveryLabel })
+      ] }) : null
+    ] })
+  ] }) });
+}
+function RichPresentation({
+  product,
+  selection,
+  images,
+  selectedImage,
+  onSelectImage,
+  onSelectVariant,
+  onQuantityChange,
+  onAddToCart,
+  isWishlisted,
+  onToggleWishlist,
+  onShare,
+  rating,
+  formatPrice,
+  specifications,
+  features,
+  reviews,
+  labels
+}) {
+  const { selectedVariant, selectedPrice, selectedCompareAt, priceAvailable, compareAtAvailable, canPurchase, quantityValue } = selection;
+  const featureList = features && features.length > 0 ? features : void 0;
+  const specEntries = specifications ? Object.entries(specifications) : [];
+  const hasSpecs = specEntries.length > 0;
+  const hasReviews = Boolean(reviews && reviews.length > 0);
+  const hasGallery = images.length > 1;
+  const hasTabs = Boolean(featureList) || hasSpecs || hasReviews || hasGallery;
+  const reviewCount = reviews?.length ?? 0;
+  const [defaultTab] = (0, import_react.useState)(
+    () => featureList ? "overview" : hasSpecs ? "specs" : hasReviews ? "reviews" : "gallery"
+  );
+  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: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-12 lg:grid-cols-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_product_overview_gallery.ProductOverviewGallery,
+        {
+          images,
+          title: product.title,
+          badgeLabel: labels.badgeLabel,
+          selectedImage,
+          onSelectImage,
+          photosLabel: labels.photosLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-3xl leading-tight font-bold text-balance", children: product.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 flex flex-wrap items-center gap-4", children: [
+            rating ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex", children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_lucide_react.Star,
+                {
+                  className: (0, import_utils.cn)(
+                    "size-4",
+                    i < rating.value ? "fill-foreground text-foreground" : "text-muted-foreground"
+                  )
+                },
+                i
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium", children: rating.value })
+            ] }) : null,
+            hasReviews ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-muted-foreground text-sm", children: [
+              reviewCount,
+              " ",
+              labels.reviewsLabel.toLowerCase()
+            ] }) : null,
+            selectedVariant?.sku ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { orientation: "vertical", className: "h-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-muted-foreground text-sm", children: [
+                labels.skuLabel,
+                ": ",
+                selectedVariant.sku
+              ] })
+            ] }) : null
+          ] })
+        ] }),
+        selectedVariant ? priceAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-baseline gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-4xl font-bold", children: (0, import_money.formatMoney)(selectedPrice, formatPrice) }),
+          compareAtAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-xl line-through", children: (0, import_money.formatMoney)(selectedCompareAt, formatPrice) }) : null
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.unavailablePriceLabel }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.selectVariantLabel }),
+        selectedVariant?.availableForSale ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-success/10 inline-flex w-fit items-center gap-2 rounded-full px-3 py-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-success size-2 rounded-full" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-success text-sm font-medium", children: labels.availabilityLabel })
+        ] }) : null,
+        product.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground leading-relaxed", children: product.description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          VariantSelector,
+          {
+            product,
+            selectedVariantId: selectedVariant?.id,
+            onSelectVariant,
+            sizesLabel: labels.selectVariantLabel,
+            variantLabel: "",
+            outOfStockLabel: labels.outOfStockLabel
+          }
+        ),
+        onQuantityChange ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          QuantityStepper,
+          {
+            quantityValue,
+            quantityLabel: labels.quantityLabel,
+            onQuantityChange
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, { size: "lg", className: "h-12 w-full cursor-pointer gap-2", disabled: !canPurchase, onClick: onAddToCart, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShoppingCart, {}),
+            labels.addToCartLabel
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              WishlistButton,
+              {
+                isWishlisted,
+                disabled: !selectedVariant,
+                onToggleWishlist,
+                removeFromWishlistLabel: labels.removeFromWishlistLabel,
+                addToWishlistLabel: labels.addToWishlistLabel,
+                className: "h-12 flex-1 gap-2 rounded-md"
+              }
+            ),
+            onShare ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_button.Button,
+              {
+                variant: "outline",
+                size: "lg",
+                className: "h-12 flex-1 cursor-pointer gap-2",
+                onClick: onShare,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Share2, {}),
+                  labels.shareLabel
+                ]
+              }
+            ) : null
+          ] })
+        ] })
+      ] })
+    ] }),
+    hasTabs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-16", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_product_overview_tabs.ProductOverviewTabs, { defaultValue: defaultTab, className: "w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_product_overview_tabs.ProductOverviewTabsList, { className: "bg-muted/50 relative grid !h-12 w-full grid-cols-4 rounded-xl p-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_product_overview_tabs.ProductOverviewTabsIndicator, {}),
+        featureList ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_product_overview_tabs.ProductOverviewTabsTrigger,
+          {
+            value: "overview",
+            className: "z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Info, { className: "size-4 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hidden sm:inline", children: labels.overviewLabel })
+            ]
+          }
+        ) : null,
+        hasSpecs ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_product_overview_tabs.ProductOverviewTabsTrigger,
+          {
+            value: "specs",
+            className: "z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Package, { className: "size-4 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hidden sm:inline", children: labels.specsLabel })
+            ]
+          }
+        ) : null,
+        hasReviews ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_product_overview_tabs.ProductOverviewTabsTrigger,
+          {
+            value: "reviews",
+            className: "z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MessageSquare, { className: "size-4 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "hidden sm:inline", children: [
+                labels.reviewsLabel,
+                " (",
+                reviewCount,
+                ")"
+              ] })
+            ]
+          }
+        ) : null,
+        hasGallery ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_product_overview_tabs.ProductOverviewTabsTrigger,
+          {
+            value: "gallery",
+            className: "z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Camera, { className: "size-4 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hidden sm:inline", children: labels.galleryLabel })
+            ]
+          }
+        ) : null
+      ] }),
+      featureList ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_product_overview_tabs.ProductOverviewTabsContentFade, { value: "overview", className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.Card, { className: "border shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "p-8 py-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "mb-6 text-xl font-semibold text-balance", children: labels.featuresLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-4 sm:grid-cols-2", children: featureList.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "group flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-primary/20 size-2 rounded-full transition-colors" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm", children: feature })
+        ] }, feature)) })
+      ] }) }) }) : null,
+      hasSpecs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_product_overview_tabs.ProductOverviewTabsContentFade, { value: "specs", className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.Card, { className: "border shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "p-8 py-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "mb-6 text-xl font-semibold text-balance", children: labels.specificationsLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-4", children: specEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "border-muted grid grid-cols-1 gap-2 border-b py-3 last:border-b-0 md:grid-cols-3 md:gap-4",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm font-medium", children: key }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "col-span-1 text-sm md:col-span-2", children: value })
+            ]
+          },
+          key
+        )) })
+      ] }) }) }) : null,
+      hasReviews && reviews ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_product_overview_tabs.ProductOverviewTabsContentFade, { value: "reviews", className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_product_overview_reviews_tab.ProductOverviewReviewsTab,
+        {
+          rating: rating?.value ?? 0,
+          reviews,
+          basedOnReviewsLabel: labels.basedOnReviewsLabel,
+          foundHelpfulLabel: labels.foundHelpfulLabel
+        }
+      ) }) : null,
+      hasGallery ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_product_overview_tabs.ProductOverviewTabsContentFade, { value: "gallery", className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_product_overview_lightbox_tab.ProductOverviewLightboxTab,
+        {
+          images,
+          title: product.title,
+          galleryLabel: labels.galleryLabel,
+          ofCounterLabel: labels.ofCounterLabel
+        }
+      ) }) : null
+    ] }) }) : null
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProductOverviewGallery,
+  ProductOverviewLightboxTab,
+  ProductOverviewReviewsTab,
+  galleryImages,
+  resolveAddToCartPayload,
+  variantLabelOf
+});
+//# sourceMappingURL=product-overview.js.map