@thorprovider/blocks 1.0.0 → 3.0.0

package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.js

@@ -0,0 +1,271 @@
+"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_quick_view_dialog_exports = {};
+__export(product_quick_view_dialog_exports, {
+  ProductQuickViewDialog: () => ProductQuickViewDialog,
+  default: () => product_quick_view_dialog_default
+});
+module.exports = __toCommonJS(product_quick_view_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("motion/react");
+var import_lucide_react = require("lucide-react");
+var import_badge = require("../../../ui/badge.js");
+var import_button = require("../../../ui/button.js");
+var import_button_group = require("../../../ui/button-group.js");
+var import_dialog = require("../../../ui/dialog.js");
+var import_separator = require("../../../ui/separator.js");
+var import_toggle_group = require("../../../ui/toggle-group.js");
+const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+const confirmationMs = 2400;
+function defaultSelection(product) {
+  return Object.fromEntries(
+    product.variants.map((variant) => {
+      const stated = variant.options.find(
+        (option) => option.value === variant.defaultValue && option.available
+      );
+      const fallback = variant.options.find((option) => option.available) ?? variant.options[0];
+      return [variant.key, (stated ?? fallback).value];
+    })
+  );
+}
+function ProductQuickViewDialog({
+  products,
+  activeIndex,
+  onActiveIndexChange,
+  onClose,
+  onAddToCart
+}) {
+  const reduceMotion = (0, import_react2.useReducedMotion)();
+  const product = activeIndex === null ? null : products[activeIndex];
+  const [selection, setSelection] = (0, import_react.useState)({});
+  const [quantity, setQuantity] = (0, import_react.useState)(1);
+  const [addedCount, setAddedCount] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (!product) {
+      return;
+    }
+    setSelection(defaultSelection(product));
+    setQuantity(1);
+    setAddedCount(0);
+  }, [product?.id]);
+  (0, import_react.useEffect)(() => {
+    if (addedCount === 0) {
+      return;
+    }
+    const timer = setTimeout(() => setAddedCount(0), confirmationMs);
+    return () => clearTimeout(timer);
+  }, [addedCount]);
+  const selectionSummary = (0, import_react.useMemo)(() => {
+    if (!product) {
+      return "";
+    }
+    return product.variants.map((variant) => variant.options.find((option) => option.value === selection[variant.key])?.label).filter(Boolean).join(" \xB7 ");
+  }, [product, selection]);
+  if (!product || activeIndex === null) {
+    return null;
+  }
+  const discount = product.compareAt ? Math.round((1 - product.price / product.compareAt) * 100) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog, { open: true, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.DialogContent, { className: "max-h-[92dvh] w-full overflow-y-auto p-0 sm:max-w-4xl md:h-[38rem] md:max-h-[92dvh] md:overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, { children: product.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, { children: product.description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-0 md:h-full md:min-h-0 md:grid-cols-[minmax(0,0.95fr)_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-muted/40 flex flex-col gap-3 p-4 sm:p-5 md:min-h-0 md:justify-center md:overflow-y-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-muted relative aspect-square w-full overflow-hidden rounded-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react2.motion.img,
+            {
+              src: product.image || void 0,
+              alt: product.imageAlt,
+              className: "absolute inset-0 size-full object-cover",
+              initial: reduceMotion ? false : { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: reduceMotion ? void 0 : { opacity: 0 },
+              transition: { duration: 0.24, ease: "easeOut" },
+              decoding: "async"
+            },
+            product.id
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "secondary", className: "absolute top-3 left-3 rounded-full", children: product.category })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_toggle_group.ToggleGroup,
+          {
+            type: "multiple",
+            spacing: 2,
+            value: [String(activeIndex)],
+            onValueChange: (value) => value[0] && onActiveIndexChange(Number(value[0])),
+            "aria-label": "Elegir producto",
+            className: "grid w-full grid-cols-4",
+            children: products.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_toggle_group.ToggleGroupItem,
+              {
+                value: String(index),
+                "aria-label": entry.name,
+                className: "data-[state=on]:ring-primary size-auto min-w-0 overflow-hidden rounded-md p-0 ring-2 ring-transparent transition-shadow data-[state=on]:bg-transparent",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    src: entry.image || void 0,
+                    alt: "",
+                    className: "bg-muted aspect-square w-full object-cover",
+                    loading: "lazy",
+                    decoding: "async"
+                  }
+                )
+              },
+              entry.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-center font-mono text-xs tabular-nums", children: `${activeIndex + 1} / ${products.length}` })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col p-4 pt-5 sm:p-6 md:min-h-0 md:overflow-y-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-xs tracking-[0.16em] uppercase", children: product.tagline }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "mt-2 text-2xl font-semibold tracking-tight text-balance", children: product.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 flex flex-wrap items-center gap-x-3 gap-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xl font-semibold tabular-nums", children: money.format(product.price) }),
+          product.compareAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm line-through tabular-nums", children: money.format(product.compareAt) }) : null,
+          discount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "secondary", className: "rounded-full font-normal", children: `${discount}% de descuento` }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-muted-foreground flex items-center gap-1.5 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Star, { className: "size-3.5 fill-foreground text-foreground", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-foreground font-medium tabular-nums", children: product.rating }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tabular-nums", children: [
+              "(",
+              product.reviewCount,
+              ")"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-4 text-sm leading-6 text-pretty", children: product.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-5 flex flex-col gap-5", children: product.variants.map((variant) => (
+          /*
+            A fieldset per variant, and a ToggleGroup inside it rather than a row of
+            Buttons with a hand-rolled `aria-pressed`. A loop of buttons has to fake single
+            selection and roving focus, and gets the focus order wrong the moment one of
+            them is disabled — which, with a sold-out finish, is most of them.
+          */
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("legend", { className: "flex w-full items-baseline gap-2 text-sm font-medium", children: [
+              variant.label,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground font-normal", children: variant.options.find((option) => option.value === selection[variant.key])?.label })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_toggle_group.ToggleGroup,
+              {
+                type: "multiple",
+                spacing: 2,
+                variant: "outline",
+                value: [selection[variant.key] ?? ""],
+                onValueChange: (value) => value[0] && setSelection((current) => ({ ...current, [variant.key]: value[0] })),
+                "aria-label": variant.label,
+                className: "mt-2 flex-wrap",
+                children: variant.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  import_toggle_group.ToggleGroupItem,
+                  {
+                    value: option.value,
+                    disabled: !option.available,
+                    "aria-label": option.available ? option.label : `${option.label}, agotado`,
+                    className: "data-[state=on]:border-primary data-[state=on]:ring-primary/30 gap-2 data-[state=on]:ring-2",
+                    children: [
+                      option.swatch ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: "ring-border size-3 rounded-full ring-1",
+                          style: { backgroundColor: option.swatch }
+                        }
+                      ) : null,
+                      option.label
+                    ]
+                  },
+                  option.value
+                ))
+              }
+            )
+          ] }, variant.key)
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-6 flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button_group.ButtonGroup, { "aria-label": "Cantidad", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.Button,
+              {
+                variant: "outline",
+                size: "icon",
+                "aria-label": "Reducir cantidad",
+                disabled: quantity <= 1,
+                onClick: () => setQuantity((current) => Math.max(1, current - 1)),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Minus, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button_group.ButtonGroupText, { "aria-live": "polite", className: "bg-background min-w-10 justify-center tabular-nums", children: quantity }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.Button,
+              {
+                variant: "outline",
+                size: "icon",
+                "aria-label": "Aumentar cantidad",
+                onClick: () => setQuantity((current) => current + 1),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.Button,
+            {
+              className: "flex-1",
+              onClick: () => {
+                setAddedCount(quantity);
+                onAddToCart?.(product, quantity, selection);
+              },
+              children: addedCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { "aria-hidden": "true" }),
+                "A\xF1adido al carrito"
+              ] }) : `A\xF1adir al carrito \xB7 ${money.format(product.price * quantity)}`
+            }
+          )
+        ] }),
+        product.unitsLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-3 text-xs", children: `Solo quedan ${product.unitsLeft} en ${selectionSummary || "esta opci\xF3n"}.` }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", "aria-live": "polite", className: "sr-only", children: addedCount > 0 ? `${addedCount} \xD7 ${product.name}, ${selectionSummary}, a\xF1adido a tu carrito` : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { className: "mt-6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "text-muted-foreground mt-4 grid gap-1.5 text-sm sm:grid-cols-2", children: product.details.map((detail) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "text-primary mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+          detail
+        ] }, detail)) }),
+        product.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: product.href,
+            className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 mt-5 w-fit rounded-sm text-sm underline underline-offset-4 outline-none focus-visible:ring-[3px]",
+            children: "Ver la p\xE1gina completa del producto"
+          }
+        ) : null
+      ] })
+    ] })
+  ] }) });
+}
+var product_quick_view_dialog_default = ProductQuickViewDialog;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProductQuickViewDialog
+});
+//# sourceMappingURL=product-quick-view-dialog.js.map

package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-overview/product-quick-view-dialog.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useMemo, useState } from 'react'\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react'\nimport { Check, Minus, Plus, Star } from 'lucide-react'\n\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { ButtonGroup, ButtonGroupText } from '../../../ui/button-group'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../../../ui/dialog'\nimport { Separator } from '../../../ui/separator'\nimport { ToggleGroup, ToggleGroupItem } from '../../../ui/toggle-group'\n\nimport type { QuickViewProduct } from './product-quick-view'\n\nconst money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })\n\n/** How long the added-to-cart confirmation stays up before the button returns to its label. */\nconst confirmationMs = 2400\n\n/**\n * What a product opens on: its stated default where it has one, and otherwise the first option\n * that is actually in stock — never a sold-out one, which would put the panel in a state whose\n * add-to-cart button cannot honestly be pressed.\n */\nfunction defaultSelection(product: QuickViewProduct): Record<string, string> {\n  return Object.fromEntries(\n    product.variants.map(variant => {\n      const stated = variant.options.find(\n        option => option.value === variant.defaultValue && option.available\n      )\n      const fallback = variant.options.find(option => option.available) ?? variant.options[0]\n\n      return [variant.key, (stated ?? fallback).value]\n    })\n  )\n}\n\n/**\n * The panel a quick view opens, and the reason the pattern exists.\n *\n * A quick view is not a small product page. It is a promise that the reader will not lose the\n * grid, so this one keeps the whole catalogue reachable from inside: the strip under the picture\n * is the other products, not other angles of this one. Choosing from it re-dresses the panel\n * around a new product, the grid behind marks where the reader has got to, and closing returns\n * them to a grid they never actually left.\n */\nexport function ProductQuickViewDialog({\n  products,\n  activeIndex,\n  onActiveIndexChange,\n  onClose,\n  onAddToCart,\n}: {\n  products: QuickViewProduct[]\n  /** Which product is open, or `null` when the dialog is closed. */\n  activeIndex: number | null\n  onActiveIndexChange: (index: number) => void\n  onClose: () => void\n  onAddToCart?: (\n    product: QuickViewProduct,\n    quantity: number,\n    selection: Record<string, string>\n  ) => void\n}) {\n  const reduceMotion = useReducedMotion()\n  const product = activeIndex === null ? null : products[activeIndex]\n\n  const [selection, setSelection] = useState<Record<string, string>>({})\n  const [quantity, setQuantity] = useState(1)\n  const [addedCount, setAddedCount] = useState(0)\n\n  /*\n    One effect keyed on the product's identity rather than three scattered resets. Carrying a\n    \"brushed brass\" across from a pendant to a sofa is worse than starting again, and a quantity\n    of four floor lamps should not become four sofas because the reader stepped sideways.\n  */\n  useEffect(() => {\n    if (!product) {\n      return\n    }\n\n    setSelection(defaultSelection(product))\n    setQuantity(1)\n    setAddedCount(0)\n  }, [product?.id]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    if (addedCount === 0) {\n      return\n    }\n\n    const timer = setTimeout(() => setAddedCount(0), confirmationMs)\n\n    return () => clearTimeout(timer)\n  }, [addedCount])\n\n  /*\n    The chosen options in words, for the live region and the stock line. Built from the variant\n    order rather than from the selection object, so it reads the way the controls are stacked\n    instead of in whatever order the keys happen to sit in.\n  */\n  const selectionSummary = useMemo(() => {\n    if (!product) {\n      return ''\n    }\n\n    return product.variants\n      .map(variant => variant.options.find(option => option.value === selection[variant.key])?.label)\n      .filter(Boolean)\n      .join(' · ')\n  }, [product, selection])\n\n  if (!product || activeIndex === null) {\n    return null\n  }\n\n  const discount = product.compareAt ? Math.round((1 - product.price / product.compareAt) * 100) : null\n\n  return (\n    <Dialog open onOpenChange={next => !next && onClose()}>\n      {/*\n        `max-h` plus `overflow-y-auto` is what makes this usable below a laptop. The popup is\n        fixed and centred with a translate, so without a bound it grew past both edges of a phone\n        and the add-to-cart button ended up off the bottom of the screen with no way to reach it\n        — the page behind a fixed element cannot scroll to it either.\n      */}\n      <DialogContent className='max-h-[92dvh] w-full overflow-y-auto p-0 sm:max-w-4xl md:h-[38rem] md:max-h-[92dvh] md:overflow-hidden'>\n        <DialogHeader className='sr-only'>\n          <DialogTitle>{product.name}</DialogTitle>\n          <DialogDescription>{product.description}</DialogDescription>\n        </DialogHeader>\n\n        {/*\n          A fixed height from `md`, and the detail column scrolls inside it.\n\n          The popup is centred with a -50% translate, so its height decides where its top edge\n          lands. Every product carries a different length of description and a different number\n          of variant rows, so stepping through the strip re-measured the panel and slid the whole\n          dialog up and down under the reader's cursor - the thumbnail they wanted next was no\n          longer where they were pointing. Holding the height still makes the strip a control\n          rather than a moving target. Below `md` the columns stack and the whole popup scrolls,\n          where a fixed height would be the wrong answer.\n        */}\n        <div className='grid gap-0 md:h-full md:min-h-0 md:grid-cols-[minmax(0,0.95fr)_minmax(0,1fr)]'>\n          <div className='bg-muted/40 flex flex-col gap-3 p-4 sm:p-5 md:min-h-0 md:justify-center md:overflow-y-auto'>\n            {/*\n              The picture cross-fades rather than cutting. At this size a hard swap reads as a\n              flicker, and the fade is what ties the thumbnail that was pressed to the picture\n              that arrives.\n            */}\n            <div className='bg-muted relative aspect-square w-full overflow-hidden rounded-lg'>\n              <AnimatePresence initial={false} mode='popLayout'>\n                <motion.img\n                  key={product.id}\n                  src={product.image || undefined}\n                  alt={product.imageAlt}\n                  className='absolute inset-0 size-full object-cover'\n                  initial={reduceMotion ? false : { opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={reduceMotion ? undefined : { opacity: 0 }}\n                  transition={{ duration: 0.24, ease: 'easeOut' }}\n                  decoding='async'\n                />\n              </AnimatePresence>\n\n              <Badge variant='secondary' className='absolute top-3 left-3 rounded-full'>\n                {product.category}\n              </Badge>\n            </div>\n\n            {/*\n              `spacing={2}` rather than a `gap-2` class. A ToggleGroup at the default spacing of\n              zero is a segmented control: it strips the item radii, collapses the shared borders\n              and adds `px-2` to every item through a `group-data-[spacing=0]` selector that no\n              plain `p-0` utility can outrank. That padding around a small thumbnail was the odd\n              width and the odd gaps; asking for real spacing turns the whole rule off.\n\n              A ToggleGroup rather than a row of buttons for the same reason it is used for the\n              variants: single selection, roving focus and arrow-key movement, none of which a\n              loop of buttons gets without being told.\n            */}\n            <ToggleGroup\n              type='multiple'\n              spacing={2}\n              value={[String(activeIndex)]}\n              onValueChange={value => value[0] && onActiveIndexChange(Number(value[0]))}\n              aria-label='Elegir producto'\n              className='grid w-full grid-cols-4'\n            >\n              {products.map((entry, index) => (\n                <ToggleGroupItem\n                  key={entry.id}\n                  value={String(index)}\n                  aria-label={entry.name}\n                  className='data-[state=on]:ring-primary size-auto min-w-0 overflow-hidden rounded-md p-0 ring-2 ring-transparent transition-shadow data-[state=on]:bg-transparent'\n                >\n                  <img\n                    src={entry.image || undefined}\n                    alt=''\n                    className='bg-muted aspect-square w-full object-cover'\n                    loading='lazy'\n                    decoding='async'\n                  />\n                </ToggleGroupItem>\n              ))}\n            </ToggleGroup>\n\n            <p className='text-muted-foreground text-center font-mono text-xs tabular-nums'>\n              {`${activeIndex + 1} / ${products.length}`}\n            </p>\n          </div>\n\n          <div className='flex flex-col p-4 pt-5 sm:p-6 md:min-h-0 md:overflow-y-auto'>\n            <p className='text-muted-foreground text-xs tracking-[0.16em] uppercase'>{product.tagline}</p>\n\n            <h2 className='mt-2 text-2xl font-semibold tracking-tight text-balance'>{product.name}</h2>\n\n            <div className='mt-3 flex flex-wrap items-center gap-x-3 gap-y-2'>\n              <p className='text-xl font-semibold tabular-nums'>{money.format(product.price)}</p>\n              {product.compareAt ? (\n                <p className='text-muted-foreground text-sm line-through tabular-nums'>\n                  {money.format(product.compareAt)}\n                </p>\n              ) : null}\n              {discount ? (\n                <Badge variant='secondary' className='rounded-full font-normal'>{`${discount}% de descuento`}</Badge>\n              ) : null}\n              <p className='text-muted-foreground flex items-center gap-1.5 text-sm'>\n                {/*\n                  Rating stars use the foreground token so they inherit theme contrast,\n                  matching storefront-hero-1 and the canonical review card. The rating number sits\n                  right beside the star, so the star is never the only carrier.\n                */}\n                <Star className='size-3.5 fill-foreground text-foreground' aria-hidden='true' />\n                <span className='text-foreground font-medium tabular-nums'>{product.rating}</span>\n                <span className='tabular-nums'>({product.reviewCount})</span>\n              </p>\n            </div>\n\n            <p className='text-muted-foreground mt-4 text-sm leading-6 text-pretty'>{product.description}</p>\n\n            <div className='mt-5 flex flex-col gap-5'>\n              {product.variants.map(variant => (\n                /*\n                  A fieldset per variant, and a ToggleGroup inside it rather than a row of\n                  Buttons with a hand-rolled `aria-pressed`. A loop of buttons has to fake single\n                  selection and roving focus, and gets the focus order wrong the moment one of\n                  them is disabled — which, with a sold-out finish, is most of them.\n                */\n                <fieldset key={variant.key}>\n                  <legend className='flex w-full items-baseline gap-2 text-sm font-medium'>\n                    {variant.label}\n                    <span className='text-muted-foreground font-normal'>\n                      {variant.options.find(option => option.value === selection[variant.key])?.label}\n                    </span>\n                  </legend>\n\n                  <ToggleGroup\n                    type='multiple'\n                    spacing={2}\n                    variant='outline'\n                    value={[selection[variant.key] ?? '']}\n                    onValueChange={value =>\n                      value[0] && setSelection(current => ({ ...current, [variant.key]: value[0] }))\n                    }\n                    aria-label={variant.label}\n                    className='mt-2 flex-wrap'\n                  >\n                    {variant.options.map(option => (\n                      <ToggleGroupItem\n                        key={option.value}\n                        value={option.value}\n                        disabled={!option.available}\n                        // Sold out is a word, not just a dimmed control.\n                        aria-label={option.available ? option.label : `${option.label}, agotado`}\n                        className='data-[state=on]:border-primary data-[state=on]:ring-primary/30 gap-2 data-[state=on]:ring-2'\n                      >\n                        {option.swatch ? (\n                          <span\n                            aria-hidden='true'\n                            className='ring-border size-3 rounded-full ring-1'\n                            style={{ backgroundColor: option.swatch }}\n                          />\n                        ) : null}\n                        {option.label}\n                      </ToggleGroupItem>\n                    ))}\n                  </ToggleGroup>\n                </fieldset>\n              ))}\n            </div>\n\n            <div className='mt-6 flex flex-wrap items-center gap-3'>\n              {/*\n                A ButtonGroup, so the stepper's shared border, its corner radii and its focus\n                stacking come from the component rather than from `rounded-r-none` by hand.\n\n                The readout is a `ButtonGroupText`, not a bare div. The group styles its children\n                through `[&>[data-slot]…]` selectors, so an element without a `data-slot` is\n                invisible to every one of them: it kept its own radius, lost no border where the\n                group expected a seam, and threw off which child counted as last - which is the\n                detached middle box with a stray rule under it.\n              */}\n              <ButtonGroup aria-label='Cantidad'>\n                <Button\n                  variant='outline'\n                  size='icon'\n                  aria-label='Reducir cantidad'\n                  disabled={quantity <= 1}\n                  onClick={() => setQuantity(current => Math.max(1, current - 1))}\n                >\n                  <Minus />\n                </Button>\n                {/*\n                  `aria-live` rather than a label: the number changes under the reader's own\n                  button presses, and announcing it is the only way they hear the result.\n                */}\n                <ButtonGroupText aria-live='polite' className='bg-background min-w-10 justify-center tabular-nums'>\n                  {quantity}\n                </ButtonGroupText>\n                <Button\n                  variant='outline'\n                  size='icon'\n                  aria-label='Aumentar cantidad'\n                  onClick={() => setQuantity(current => current + 1)}\n                >\n                  <Plus />\n                </Button>\n              </ButtonGroup>\n\n              <Button\n                className='flex-1'\n                onClick={() => {\n                  setAddedCount(quantity)\n                  onAddToCart?.(product, quantity, selection)\n                }}\n              >\n                {addedCount > 0 ? (\n                  <>\n                    <Check aria-hidden='true' />\n                    Añadido al carrito\n                  </>\n                ) : (\n                  `Añadir al carrito · ${money.format(product.price * quantity)}`\n                )}\n              </Button>\n            </div>\n\n            {product.unitsLeft ? (\n              <p className='text-muted-foreground mt-3 text-xs'>\n                {`Solo quedan ${product.unitsLeft} en ${selectionSummary || 'esta opción'}.`}\n              </p>\n            ) : null}\n\n            {/* The one announcement, off-screen, that the visible confirmation stands in for. */}\n            <p role='status' aria-live='polite' className='sr-only'>\n              {addedCount > 0 ? `${addedCount} × ${product.name}, ${selectionSummary}, añadido a tu carrito` : ''}\n            </p>\n\n            <Separator className='mt-6' />\n\n            <ul className='text-muted-foreground mt-4 grid gap-1.5 text-sm sm:grid-cols-2'>\n              {product.details.map(detail => (\n                <li key={detail} className='flex items-start gap-2'>\n                  <Check className='text-primary mt-0.5 size-3.5 shrink-0' aria-hidden='true' />\n                  {detail}\n                </li>\n              ))}\n            </ul>\n\n            {product.href ? (\n              <a\n                href={product.href}\n                className='text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 mt-5 w-fit rounded-sm text-sm underline underline-offset-4 outline-none focus-visible:ring-[3px]'\n              >\n                Ver la página completa del producto\n              </a>\n            ) : null}\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default ProductQuickViewDialog"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsIQ;AApIR,mBAA6C;AAC7C,IAAAA,gBAA0D;AAC1D,0BAAyC;AAEzC,mBAAsB;AACtB,oBAAuB;AACvB,0BAA6C;AAC7C,oBAMO;AACP,uBAA0B;AAC1B,0BAA6C;AAI7C,MAAM,QAAQ,IAAI,KAAK,aAAa,SAAS,EAAE,OAAO,YAAY,UAAU,OAAO,uBAAuB,EAAE,CAAC;AAG7G,MAAM,iBAAiB;AAOvB,SAAS,iBAAiB,SAAmD;AAC3E,SAAO,OAAO;AAAA,IACZ,QAAQ,SAAS,IAAI,aAAW;AAC9B,YAAM,SAAS,QAAQ,QAAQ;AAAA,QAC7B,YAAU,OAAO,UAAU,QAAQ,gBAAgB,OAAO;AAAA,MAC5D;AACA,YAAM,WAAW,QAAQ,QAAQ,KAAK,YAAU,OAAO,SAAS,KAAK,QAAQ,QAAQ,CAAC;AAEtF,aAAO,CAAC,QAAQ,MAAM,UAAU,UAAU,KAAK;AAAA,IACjD,CAAC;AAAA,EACH;AACF;AAWO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,QAAM,mBAAe,gCAAiB;AACtC,QAAM,UAAU,gBAAgB,OAAO,OAAO,SAAS,WAAW;AAElE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAiC,CAAC,CAAC;AACrE,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,CAAC;AAC1C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,CAAC;AAO9C,8BAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,iBAAa,iBAAiB,OAAO,CAAC;AACtC,gBAAY,CAAC;AACb,kBAAc,CAAC;AAAA,EACjB,GAAG,CAAC,SAAS,EAAE,CAAC;AAEhB,8BAAU,MAAM;AACd,QAAI,eAAe,GAAG;AACpB;AAAA,IACF;AAEA,UAAM,QAAQ,WAAW,MAAM,cAAc,CAAC,GAAG,cAAc;AAE/D,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,UAAU,CAAC;AAOf,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,CAAC,SAAS;AACZ,aAAO;AAAA,IACT;AAEA,WAAO,QAAQ,SACZ,IAAI,aAAW,QAAQ,QAAQ,KAAK,YAAU,OAAO,UAAU,UAAU,QAAQ,GAAG,CAAC,GAAG,KAAK,EAC7F,OAAO,OAAO,EACd,KAAK,QAAK;AAAA,EACf,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,MAAI,CAAC,WAAW,gBAAgB,MAAM;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,QAAQ,YAAY,KAAK,OAAO,IAAI,QAAQ,QAAQ,QAAQ,aAAa,GAAG,IAAI;AAEjG,SACE,4CAAC,wBAAO,MAAI,MAAC,cAAc,UAAQ,CAAC,QAAQ,QAAQ,GAOlD,uDAAC,+BAAc,WAAU,0GACvB;AAAA,iDAAC,8BAAa,WAAU,WACtB;AAAA,kDAAC,6BAAa,kBAAQ,MAAK;AAAA,MAC3B,4CAAC,mCAAmB,kBAAQ,aAAY;AAAA,OAC1C;AAAA,IAaA,6CAAC,SAAI,WAAU,iFACb;AAAA,mDAAC,SAAI,WAAU,8FAMb;AAAA,qDAAC,SAAI,WAAU,qEACb;AAAA,sDAAC,iCAAgB,SAAS,OAAO,MAAK,aACpC;AAAA,YAAC,qBAAO;AAAA,YAAP;AAAA,cAEC,KAAK,QAAQ,SAAS;AAAA,cACtB,KAAK,QAAQ;AAAA,cACb,WAAU;AAAA,cACV,SAAS,eAAe,QAAQ,EAAE,SAAS,EAAE;AAAA,cAC7C,SAAS,EAAE,SAAS,EAAE;AAAA,cACtB,MAAM,eAAe,SAAY,EAAE,SAAS,EAAE;AAAA,cAC9C,YAAY,EAAE,UAAU,MAAM,MAAM,UAAU;AAAA,cAC9C,UAAS;AAAA;AAAA,YARJ,QAAQ;AAAA,UASf,GACF;AAAA,UAEA,4CAAC,sBAAM,SAAQ,aAAY,WAAU,sCAClC,kBAAQ,UACX;AAAA,WACF;AAAA,QAaA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,OAAO,CAAC,OAAO,WAAW,CAAC;AAAA,YAC3B,eAAe,WAAS,MAAM,CAAC,KAAK,oBAAoB,OAAO,MAAM,CAAC,CAAC,CAAC;AAAA,YACxE,cAAW;AAAA,YACX,WAAU;AAAA,YAET,mBAAS,IAAI,CAAC,OAAO,UACpB;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAO,OAAO,KAAK;AAAA,gBACnB,cAAY,MAAM;AAAA,gBAClB,WAAU;AAAA,gBAEV;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK,MAAM,SAAS;AAAA,oBACpB,KAAI;AAAA,oBACJ,WAAU;AAAA,oBACV,SAAQ;AAAA,oBACR,UAAS;AAAA;AAAA,gBACX;AAAA;AAAA,cAXK,MAAM;AAAA,YAYb,CACD;AAAA;AAAA,QACH;AAAA,QAEA,4CAAC,OAAE,WAAU,oEACV,aAAG,cAAc,CAAC,MAAM,SAAS,MAAM,IAC1C;AAAA,SACF;AAAA,MAEA,6CAAC,SAAI,WAAU,+DACb;AAAA,oDAAC,OAAE,WAAU,6DAA6D,kBAAQ,SAAQ;AAAA,QAE1F,4CAAC,QAAG,WAAU,2DAA2D,kBAAQ,MAAK;AAAA,QAEtF,6CAAC,SAAI,WAAU,oDACb;AAAA,sDAAC,OAAE,WAAU,sCAAsC,gBAAM,OAAO,QAAQ,KAAK,GAAE;AAAA,UAC9E,QAAQ,YACP,4CAAC,OAAE,WAAU,2DACV,gBAAM,OAAO,QAAQ,SAAS,GACjC,IACE;AAAA,UACH,WACC,4CAAC,sBAAM,SAAQ,aAAY,WAAU,4BAA4B,aAAG,QAAQ,kBAAiB,IAC3F;AAAA,UACJ,6CAAC,OAAE,WAAU,2DAMX;AAAA,wDAAC,4BAAK,WAAU,4CAA2C,eAAY,QAAO;AAAA,YAC9E,4CAAC,UAAK,WAAU,4CAA4C,kBAAQ,QAAO;AAAA,YAC3E,6CAAC,UAAK,WAAU,gBAAe;AAAA;AAAA,cAAE,QAAQ;AAAA,cAAY;AAAA,eAAC;AAAA,aACxD;AAAA,WACF;AAAA,QAEA,4CAAC,OAAE,WAAU,4DAA4D,kBAAQ,aAAY;AAAA,QAE7F,4CAAC,SAAI,WAAU,4BACZ,kBAAQ,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOpB,6CAAC,cACC;AAAA,yDAAC,YAAO,WAAU,wDACf;AAAA,sBAAQ;AAAA,cACT,4CAAC,UAAK,WAAU,qCACb,kBAAQ,QAAQ,KAAK,YAAU,OAAO,UAAU,UAAU,QAAQ,GAAG,CAAC,GAAG,OAC5E;AAAA,eACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,SAAQ;AAAA,gBACR,OAAO,CAAC,UAAU,QAAQ,GAAG,KAAK,EAAE;AAAA,gBACpC,eAAe,WACb,MAAM,CAAC,KAAK,aAAa,cAAY,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,GAAG,MAAM,CAAC,EAAE,EAAE;AAAA,gBAE/E,cAAY,QAAQ;AAAA,gBACpB,WAAU;AAAA,gBAET,kBAAQ,QAAQ,IAAI,YACnB;AAAA,kBAAC;AAAA;AAAA,oBAEC,OAAO,OAAO;AAAA,oBACd,UAAU,CAAC,OAAO;AAAA,oBAElB,cAAY,OAAO,YAAY,OAAO,QAAQ,GAAG,OAAO,KAAK;AAAA,oBAC7D,WAAU;AAAA,oBAET;AAAA,6BAAO,SACN;AAAA,wBAAC;AAAA;AAAA,0BACC,eAAY;AAAA,0BACZ,WAAU;AAAA,0BACV,OAAO,EAAE,iBAAiB,OAAO,OAAO;AAAA;AAAA,sBAC1C,IACE;AAAA,sBACH,OAAO;AAAA;AAAA;AAAA,kBAdH,OAAO;AAAA,gBAed,CACD;AAAA;AAAA,YACH;AAAA,eAtCa,QAAQ,GAuCvB;AAAA,SACD,GACH;AAAA,QAEA,6CAAC,SAAI,WAAU,0CAWb;AAAA,uDAAC,mCAAY,cAAW,YACtB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,UAAU,YAAY;AAAA,gBACtB,SAAS,MAAM,YAAY,aAAW,KAAK,IAAI,GAAG,UAAU,CAAC,CAAC;AAAA,gBAE9D,sDAAC,6BAAM;AAAA;AAAA,YACT;AAAA,YAKA,4CAAC,uCAAgB,aAAU,UAAS,WAAU,sDAC3C,oBACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,SAAS,MAAM,YAAY,aAAW,UAAU,CAAC;AAAA,gBAEjD,sDAAC,4BAAK;AAAA;AAAA,YACR;AAAA,aACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,MAAM;AACb,8BAAc,QAAQ;AACtB,8BAAc,SAAS,UAAU,SAAS;AAAA,cAC5C;AAAA,cAEC,uBAAa,IACZ,4EACE;AAAA,4DAAC,6BAAM,eAAY,QAAO;AAAA,gBAAE;AAAA,iBAE9B,IAEA,6BAAuB,MAAM,OAAO,QAAQ,QAAQ,QAAQ,CAAC;AAAA;AAAA,UAEjE;AAAA,WACF;AAAA,QAEC,QAAQ,YACP,4CAAC,OAAE,WAAU,sCACV,yBAAe,QAAQ,SAAS,OAAO,oBAAoB,gBAAa,KAC3E,IACE;AAAA,QAGJ,4CAAC,OAAE,MAAK,UAAS,aAAU,UAAS,WAAU,WAC3C,uBAAa,IAAI,GAAG,UAAU,SAAM,QAAQ,IAAI,KAAK,gBAAgB,8BAA2B,IACnG;AAAA,QAEA,4CAAC,8BAAU,WAAU,QAAO;AAAA,QAE5B,4CAAC,QAAG,WAAU,kEACX,kBAAQ,QAAQ,IAAI,YACnB,6CAAC,QAAgB,WAAU,0BACzB;AAAA,sDAAC,6BAAM,WAAU,yCAAwC,eAAY,QAAO;AAAA,UAC3E;AAAA,aAFM,MAGT,CACD,GACH;AAAA,QAEC,QAAQ,OACP;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,QAAQ;AAAA,YACd,WAAU;AAAA,YACX;AAAA;AAAA,QAED,IACE;AAAA,SACN;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAEA,IAAO,oCAAQ;","names":["import_react"]}

package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.mjs

@@ -0,0 +1,253 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Check, Minus, Plus, Star } from "lucide-react";
+import { Badge } from "../../../ui/badge.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { ButtonGroup, ButtonGroupText } from "../../../ui/button-group.mjs";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../../../ui/dialog.mjs";
+import { Separator } from "../../../ui/separator.mjs";
+import { ToggleGroup, ToggleGroupItem } from "../../../ui/toggle-group.mjs";
+const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+const confirmationMs = 2400;
+function defaultSelection(product) {
+  return Object.fromEntries(
+    product.variants.map((variant) => {
+      const stated = variant.options.find(
+        (option) => option.value === variant.defaultValue && option.available
+      );
+      const fallback = variant.options.find((option) => option.available) ?? variant.options[0];
+      return [variant.key, (stated ?? fallback).value];
+    })
+  );
+}
+function ProductQuickViewDialog({
+  products,
+  activeIndex,
+  onActiveIndexChange,
+  onClose,
+  onAddToCart
+}) {
+  const reduceMotion = useReducedMotion();
+  const product = activeIndex === null ? null : products[activeIndex];
+  const [selection, setSelection] = useState({});
+  const [quantity, setQuantity] = useState(1);
+  const [addedCount, setAddedCount] = useState(0);
+  useEffect(() => {
+    if (!product) {
+      return;
+    }
+    setSelection(defaultSelection(product));
+    setQuantity(1);
+    setAddedCount(0);
+  }, [product?.id]);
+  useEffect(() => {
+    if (addedCount === 0) {
+      return;
+    }
+    const timer = setTimeout(() => setAddedCount(0), confirmationMs);
+    return () => clearTimeout(timer);
+  }, [addedCount]);
+  const selectionSummary = useMemo(() => {
+    if (!product) {
+      return "";
+    }
+    return product.variants.map((variant) => variant.options.find((option) => option.value === selection[variant.key])?.label).filter(Boolean).join(" \xB7 ");
+  }, [product, selection]);
+  if (!product || activeIndex === null) {
+    return null;
+  }
+  const discount = product.compareAt ? Math.round((1 - product.price / product.compareAt) * 100) : null;
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[92dvh] w-full overflow-y-auto p-0 sm:max-w-4xl md:h-[38rem] md:max-h-[92dvh] md:overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: product.name }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: product.description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-0 md:h-full md:min-h-0 md:grid-cols-[minmax(0,0.95fr)_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-muted/40 flex flex-col gap-3 p-4 sm:p-5 md:min-h-0 md:justify-center md:overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-muted relative aspect-square w-full overflow-hidden rounded-lg", children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ jsx(
+            motion.img,
+            {
+              src: product.image || void 0,
+              alt: product.imageAlt,
+              className: "absolute inset-0 size-full object-cover",
+              initial: reduceMotion ? false : { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: reduceMotion ? void 0 : { opacity: 0 },
+              transition: { duration: 0.24, ease: "easeOut" },
+              decoding: "async"
+            },
+            product.id
+          ) }),
+          /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "absolute top-3 left-3 rounded-full", children: product.category })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            type: "multiple",
+            spacing: 2,
+            value: [String(activeIndex)],
+            onValueChange: (value) => value[0] && onActiveIndexChange(Number(value[0])),
+            "aria-label": "Elegir producto",
+            className: "grid w-full grid-cols-4",
+            children: products.map((entry, index) => /* @__PURE__ */ jsx(
+              ToggleGroupItem,
+              {
+                value: String(index),
+                "aria-label": entry.name,
+                className: "data-[state=on]:ring-primary size-auto min-w-0 overflow-hidden rounded-md p-0 ring-2 ring-transparent transition-shadow data-[state=on]:bg-transparent",
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: entry.image || void 0,
+                    alt: "",
+                    className: "bg-muted aspect-square w-full object-cover",
+                    loading: "lazy",
+                    decoding: "async"
+                  }
+                )
+              },
+              entry.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-center font-mono text-xs tabular-nums", children: `${activeIndex + 1} / ${products.length}` })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4 pt-5 sm:p-6 md:min-h-0 md:overflow-y-auto", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs tracking-[0.16em] uppercase", children: product.tagline }),
+        /* @__PURE__ */ jsx("h2", { className: "mt-2 text-2xl font-semibold tracking-tight text-balance", children: product.name }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-x-3 gap-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold tabular-nums", children: money.format(product.price) }),
+          product.compareAt ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm line-through tabular-nums", children: money.format(product.compareAt) }) : null,
+          discount ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "rounded-full font-normal", children: `${discount}% de descuento` }) : null,
+          /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground flex items-center gap-1.5 text-sm", children: [
+            /* @__PURE__ */ jsx(Star, { className: "size-3.5 fill-foreground text-foreground", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium tabular-nums", children: product.rating }),
+            /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+              "(",
+              product.reviewCount,
+              ")"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-sm leading-6 text-pretty", children: product.description }),
+        /* @__PURE__ */ jsx("div", { className: "mt-5 flex flex-col gap-5", children: product.variants.map((variant) => (
+          /*
+            A fieldset per variant, and a ToggleGroup inside it rather than a row of
+            Buttons with a hand-rolled `aria-pressed`. A loop of buttons has to fake single
+            selection and roving focus, and gets the focus order wrong the moment one of
+            them is disabled — which, with a sold-out finish, is most of them.
+          */
+          /* @__PURE__ */ jsxs("fieldset", { children: [
+            /* @__PURE__ */ jsxs("legend", { className: "flex w-full items-baseline gap-2 text-sm font-medium", children: [
+              variant.label,
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal", children: variant.options.find((option) => option.value === selection[variant.key])?.label })
+            ] }),
+            /* @__PURE__ */ jsx(
+              ToggleGroup,
+              {
+                type: "multiple",
+                spacing: 2,
+                variant: "outline",
+                value: [selection[variant.key] ?? ""],
+                onValueChange: (value) => value[0] && setSelection((current) => ({ ...current, [variant.key]: value[0] })),
+                "aria-label": variant.label,
+                className: "mt-2 flex-wrap",
+                children: variant.options.map((option) => /* @__PURE__ */ jsxs(
+                  ToggleGroupItem,
+                  {
+                    value: option.value,
+                    disabled: !option.available,
+                    "aria-label": option.available ? option.label : `${option.label}, agotado`,
+                    className: "data-[state=on]:border-primary data-[state=on]:ring-primary/30 gap-2 data-[state=on]:ring-2",
+                    children: [
+                      option.swatch ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: "ring-border size-3 rounded-full ring-1",
+                          style: { backgroundColor: option.swatch }
+                        }
+                      ) : null,
+                      option.label
+                    ]
+                  },
+                  option.value
+                ))
+              }
+            )
+          ] }, variant.key)
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(ButtonGroup, { "aria-label": "Cantidad", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                "aria-label": "Reducir cantidad",
+                disabled: quantity <= 1,
+                onClick: () => setQuantity((current) => Math.max(1, current - 1)),
+                children: /* @__PURE__ */ jsx(Minus, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(ButtonGroupText, { "aria-live": "polite", className: "bg-background min-w-10 justify-center tabular-nums", children: quantity }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                "aria-label": "Aumentar cantidad",
+                onClick: () => setQuantity((current) => current + 1),
+                children: /* @__PURE__ */ jsx(Plus, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "flex-1",
+              onClick: () => {
+                setAddedCount(quantity);
+                onAddToCart?.(product, quantity, selection);
+              },
+              children: addedCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }),
+                "A\xF1adido al carrito"
+              ] }) : `A\xF1adir al carrito \xB7 ${money.format(product.price * quantity)}`
+            }
+          )
+        ] }),
+        product.unitsLeft ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-3 text-xs", children: `Solo quedan ${product.unitsLeft} en ${selectionSummary || "esta opci\xF3n"}.` }) : null,
+        /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", className: "sr-only", children: addedCount > 0 ? `${addedCount} \xD7 ${product.name}, ${selectionSummary}, a\xF1adido a tu carrito` : "" }),
+        /* @__PURE__ */ jsx(Separator, { className: "mt-6" }),
+        /* @__PURE__ */ jsx("ul", { className: "text-muted-foreground mt-4 grid gap-1.5 text-sm sm:grid-cols-2", children: product.details.map((detail) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(Check, { className: "text-primary mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+          detail
+        ] }, detail)) }),
+        product.href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: product.href,
+            className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 mt-5 w-fit rounded-sm text-sm underline underline-offset-4 outline-none focus-visible:ring-[3px]",
+            children: "Ver la p\xE1gina completa del producto"
+          }
+        ) : null
+      ] })
+    ] })
+  ] }) });
+}
+var product_quick_view_dialog_default = ProductQuickViewDialog;
+export {
+  ProductQuickViewDialog,
+  product_quick_view_dialog_default as default
+};
+//# sourceMappingURL=product-quick-view-dialog.mjs.map

package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-overview/product-quick-view-dialog.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useMemo, useState } from 'react'\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react'\nimport { Check, Minus, Plus, Star } from 'lucide-react'\n\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { ButtonGroup, ButtonGroupText } from '../../../ui/button-group'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../../../ui/dialog'\nimport { Separator } from '../../../ui/separator'\nimport { ToggleGroup, ToggleGroupItem } from '../../../ui/toggle-group'\n\nimport type { QuickViewProduct } from './product-quick-view'\n\nconst money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })\n\n/** How long the added-to-cart confirmation stays up before the button returns to its label. */\nconst confirmationMs = 2400\n\n/**\n * What a product opens on: its stated default where it has one, and otherwise the first option\n * that is actually in stock — never a sold-out one, which would put the panel in a state whose\n * add-to-cart button cannot honestly be pressed.\n */\nfunction defaultSelection(product: QuickViewProduct): Record<string, string> {\n  return Object.fromEntries(\n    product.variants.map(variant => {\n      const stated = variant.options.find(\n        option => option.value === variant.defaultValue && option.available\n      )\n      const fallback = variant.options.find(option => option.available) ?? variant.options[0]\n\n      return [variant.key, (stated ?? fallback).value]\n    })\n  )\n}\n\n/**\n * The panel a quick view opens, and the reason the pattern exists.\n *\n * A quick view is not a small product page. It is a promise that the reader will not lose the\n * grid, so this one keeps the whole catalogue reachable from inside: the strip under the picture\n * is the other products, not other angles of this one. Choosing from it re-dresses the panel\n * around a new product, the grid behind marks where the reader has got to, and closing returns\n * them to a grid they never actually left.\n */\nexport function ProductQuickViewDialog({\n  products,\n  activeIndex,\n  onActiveIndexChange,\n  onClose,\n  onAddToCart,\n}: {\n  products: QuickViewProduct[]\n  /** Which product is open, or `null` when the dialog is closed. */\n  activeIndex: number | null\n  onActiveIndexChange: (index: number) => void\n  onClose: () => void\n  onAddToCart?: (\n    product: QuickViewProduct,\n    quantity: number,\n    selection: Record<string, string>\n  ) => void\n}) {\n  const reduceMotion = useReducedMotion()\n  const product = activeIndex === null ? null : products[activeIndex]\n\n  const [selection, setSelection] = useState<Record<string, string>>({})\n  const [quantity, setQuantity] = useState(1)\n  const [addedCount, setAddedCount] = useState(0)\n\n  /*\n    One effect keyed on the product's identity rather than three scattered resets. Carrying a\n    \"brushed brass\" across from a pendant to a sofa is worse than starting again, and a quantity\n    of four floor lamps should not become four sofas because the reader stepped sideways.\n  */\n  useEffect(() => {\n    if (!product) {\n      return\n    }\n\n    setSelection(defaultSelection(product))\n    setQuantity(1)\n    setAddedCount(0)\n  }, [product?.id]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    if (addedCount === 0) {\n      return\n    }\n\n    const timer = setTimeout(() => setAddedCount(0), confirmationMs)\n\n    return () => clearTimeout(timer)\n  }, [addedCount])\n\n  /*\n    The chosen options in words, for the live region and the stock line. Built from the variant\n    order rather than from the selection object, so it reads the way the controls are stacked\n    instead of in whatever order the keys happen to sit in.\n  */\n  const selectionSummary = useMemo(() => {\n    if (!product) {\n      return ''\n    }\n\n    return product.variants\n      .map(variant => variant.options.find(option => option.value === selection[variant.key])?.label)\n      .filter(Boolean)\n      .join(' · ')\n  }, [product, selection])\n\n  if (!product || activeIndex === null) {\n    return null\n  }\n\n  const discount = product.compareAt ? Math.round((1 - product.price / product.compareAt) * 100) : null\n\n  return (\n    <Dialog open onOpenChange={next => !next && onClose()}>\n      {/*\n        `max-h` plus `overflow-y-auto` is what makes this usable below a laptop. The popup is\n        fixed and centred with a translate, so without a bound it grew past both edges of a phone\n        and the add-to-cart button ended up off the bottom of the screen with no way to reach it\n        — the page behind a fixed element cannot scroll to it either.\n      */}\n      <DialogContent className='max-h-[92dvh] w-full overflow-y-auto p-0 sm:max-w-4xl md:h-[38rem] md:max-h-[92dvh] md:overflow-hidden'>\n        <DialogHeader className='sr-only'>\n          <DialogTitle>{product.name}</DialogTitle>\n          <DialogDescription>{product.description}</DialogDescription>\n        </DialogHeader>\n\n        {/*\n          A fixed height from `md`, and the detail column scrolls inside it.\n\n          The popup is centred with a -50% translate, so its height decides where its top edge\n          lands. Every product carries a different length of description and a different number\n          of variant rows, so stepping through the strip re-measured the panel and slid the whole\n          dialog up and down under the reader's cursor - the thumbnail they wanted next was no\n          longer where they were pointing. Holding the height still makes the strip a control\n          rather than a moving target. Below `md` the columns stack and the whole popup scrolls,\n          where a fixed height would be the wrong answer.\n        */}\n        <div className='grid gap-0 md:h-full md:min-h-0 md:grid-cols-[minmax(0,0.95fr)_minmax(0,1fr)]'>\n          <div className='bg-muted/40 flex flex-col gap-3 p-4 sm:p-5 md:min-h-0 md:justify-center md:overflow-y-auto'>\n            {/*\n              The picture cross-fades rather than cutting. At this size a hard swap reads as a\n              flicker, and the fade is what ties the thumbnail that was pressed to the picture\n              that arrives.\n            */}\n            <div className='bg-muted relative aspect-square w-full overflow-hidden rounded-lg'>\n              <AnimatePresence initial={false} mode='popLayout'>\n                <motion.img\n                  key={product.id}\n                  src={product.image || undefined}\n                  alt={product.imageAlt}\n                  className='absolute inset-0 size-full object-cover'\n                  initial={reduceMotion ? false : { opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={reduceMotion ? undefined : { opacity: 0 }}\n                  transition={{ duration: 0.24, ease: 'easeOut' }}\n                  decoding='async'\n                />\n              </AnimatePresence>\n\n              <Badge variant='secondary' className='absolute top-3 left-3 rounded-full'>\n                {product.category}\n              </Badge>\n            </div>\n\n            {/*\n              `spacing={2}` rather than a `gap-2` class. A ToggleGroup at the default spacing of\n              zero is a segmented control: it strips the item radii, collapses the shared borders\n              and adds `px-2` to every item through a `group-data-[spacing=0]` selector that no\n              plain `p-0` utility can outrank. That padding around a small thumbnail was the odd\n              width and the odd gaps; asking for real spacing turns the whole rule off.\n\n              A ToggleGroup rather than a row of buttons for the same reason it is used for the\n              variants: single selection, roving focus and arrow-key movement, none of which a\n              loop of buttons gets without being told.\n            */}\n            <ToggleGroup\n              type='multiple'\n              spacing={2}\n              value={[String(activeIndex)]}\n              onValueChange={value => value[0] && onActiveIndexChange(Number(value[0]))}\n              aria-label='Elegir producto'\n              className='grid w-full grid-cols-4'\n            >\n              {products.map((entry, index) => (\n                <ToggleGroupItem\n                  key={entry.id}\n                  value={String(index)}\n                  aria-label={entry.name}\n                  className='data-[state=on]:ring-primary size-auto min-w-0 overflow-hidden rounded-md p-0 ring-2 ring-transparent transition-shadow data-[state=on]:bg-transparent'\n                >\n                  <img\n                    src={entry.image || undefined}\n                    alt=''\n                    className='bg-muted aspect-square w-full object-cover'\n                    loading='lazy'\n                    decoding='async'\n                  />\n                </ToggleGroupItem>\n              ))}\n            </ToggleGroup>\n\n            <p className='text-muted-foreground text-center font-mono text-xs tabular-nums'>\n              {`${activeIndex + 1} / ${products.length}`}\n            </p>\n          </div>\n\n          <div className='flex flex-col p-4 pt-5 sm:p-6 md:min-h-0 md:overflow-y-auto'>\n            <p className='text-muted-foreground text-xs tracking-[0.16em] uppercase'>{product.tagline}</p>\n\n            <h2 className='mt-2 text-2xl font-semibold tracking-tight text-balance'>{product.name}</h2>\n\n            <div className='mt-3 flex flex-wrap items-center gap-x-3 gap-y-2'>\n              <p className='text-xl font-semibold tabular-nums'>{money.format(product.price)}</p>\n              {product.compareAt ? (\n                <p className='text-muted-foreground text-sm line-through tabular-nums'>\n                  {money.format(product.compareAt)}\n                </p>\n              ) : null}\n              {discount ? (\n                <Badge variant='secondary' className='rounded-full font-normal'>{`${discount}% de descuento`}</Badge>\n              ) : null}\n              <p className='text-muted-foreground flex items-center gap-1.5 text-sm'>\n                {/*\n                  Rating stars use the foreground token so they inherit theme contrast,\n                  matching storefront-hero-1 and the canonical review card. The rating number sits\n                  right beside the star, so the star is never the only carrier.\n                */}\n                <Star className='size-3.5 fill-foreground text-foreground' aria-hidden='true' />\n                <span className='text-foreground font-medium tabular-nums'>{product.rating}</span>\n                <span className='tabular-nums'>({product.reviewCount})</span>\n              </p>\n            </div>\n\n            <p className='text-muted-foreground mt-4 text-sm leading-6 text-pretty'>{product.description}</p>\n\n            <div className='mt-5 flex flex-col gap-5'>\n              {product.variants.map(variant => (\n                /*\n                  A fieldset per variant, and a ToggleGroup inside it rather than a row of\n                  Buttons with a hand-rolled `aria-pressed`. A loop of buttons has to fake single\n                  selection and roving focus, and gets the focus order wrong the moment one of\n                  them is disabled — which, with a sold-out finish, is most of them.\n                */\n                <fieldset key={variant.key}>\n                  <legend className='flex w-full items-baseline gap-2 text-sm font-medium'>\n                    {variant.label}\n                    <span className='text-muted-foreground font-normal'>\n                      {variant.options.find(option => option.value === selection[variant.key])?.label}\n                    </span>\n                  </legend>\n\n                  <ToggleGroup\n                    type='multiple'\n                    spacing={2}\n                    variant='outline'\n                    value={[selection[variant.key] ?? '']}\n                    onValueChange={value =>\n                      value[0] && setSelection(current => ({ ...current, [variant.key]: value[0] }))\n                    }\n                    aria-label={variant.label}\n                    className='mt-2 flex-wrap'\n                  >\n                    {variant.options.map(option => (\n                      <ToggleGroupItem\n                        key={option.value}\n                        value={option.value}\n                        disabled={!option.available}\n                        // Sold out is a word, not just a dimmed control.\n                        aria-label={option.available ? option.label : `${option.label}, agotado`}\n                        className='data-[state=on]:border-primary data-[state=on]:ring-primary/30 gap-2 data-[state=on]:ring-2'\n                      >\n                        {option.swatch ? (\n                          <span\n                            aria-hidden='true'\n                            className='ring-border size-3 rounded-full ring-1'\n                            style={{ backgroundColor: option.swatch }}\n                          />\n                        ) : null}\n                        {option.label}\n                      </ToggleGroupItem>\n                    ))}\n                  </ToggleGroup>\n                </fieldset>\n              ))}\n            </div>\n\n            <div className='mt-6 flex flex-wrap items-center gap-3'>\n              {/*\n                A ButtonGroup, so the stepper's shared border, its corner radii and its focus\n                stacking come from the component rather than from `rounded-r-none` by hand.\n\n                The readout is a `ButtonGroupText`, not a bare div. The group styles its children\n                through `[&>[data-slot]…]` selectors, so an element without a `data-slot` is\n                invisible to every one of them: it kept its own radius, lost no border where the\n                group expected a seam, and threw off which child counted as last - which is the\n                detached middle box with a stray rule under it.\n              */}\n              <ButtonGroup aria-label='Cantidad'>\n                <Button\n                  variant='outline'\n                  size='icon'\n                  aria-label='Reducir cantidad'\n                  disabled={quantity <= 1}\n                  onClick={() => setQuantity(current => Math.max(1, current - 1))}\n                >\n                  <Minus />\n                </Button>\n                {/*\n                  `aria-live` rather than a label: the number changes under the reader's own\n                  button presses, and announcing it is the only way they hear the result.\n                */}\n                <ButtonGroupText aria-live='polite' className='bg-background min-w-10 justify-center tabular-nums'>\n                  {quantity}\n                </ButtonGroupText>\n                <Button\n                  variant='outline'\n                  size='icon'\n                  aria-label='Aumentar cantidad'\n                  onClick={() => setQuantity(current => current + 1)}\n                >\n                  <Plus />\n                </Button>\n              </ButtonGroup>\n\n              <Button\n                className='flex-1'\n                onClick={() => {\n                  setAddedCount(quantity)\n                  onAddToCart?.(product, quantity, selection)\n                }}\n              >\n                {addedCount > 0 ? (\n                  <>\n                    <Check aria-hidden='true' />\n                    Añadido al carrito\n                  </>\n                ) : (\n                  `Añadir al carrito · ${money.format(product.price * quantity)}`\n                )}\n              </Button>\n            </div>\n\n            {product.unitsLeft ? (\n              <p className='text-muted-foreground mt-3 text-xs'>\n                {`Solo quedan ${product.unitsLeft} en ${selectionSummary || 'esta opción'}.`}\n              </p>\n            ) : null}\n\n            {/* The one announcement, off-screen, that the visible confirmation stands in for. */}\n            <p role='status' aria-live='polite' className='sr-only'>\n              {addedCount > 0 ? `${addedCount} × ${product.name}, ${selectionSummary}, añadido a tu carrito` : ''}\n            </p>\n\n            <Separator className='mt-6' />\n\n            <ul className='text-muted-foreground mt-4 grid gap-1.5 text-sm sm:grid-cols-2'>\n              {product.details.map(detail => (\n                <li key={detail} className='flex items-start gap-2'>\n                  <Check className='text-primary mt-0.5 size-3.5 shrink-0' aria-hidden='true' />\n                  {detail}\n                </li>\n              ))}\n            </ul>\n\n            {product.href ? (\n              <a\n                href={product.href}\n                className='text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 mt-5 w-fit rounded-sm text-sm underline underline-offset-4 outline-none focus-visible:ring-[3px]'\n              >\n                Ver la página completa del producto\n              </a>\n            ) : null}\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default ProductQuickViewDialog"],"mappings":"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","names":[]}