@thorprovider/blocks 1.0.0 → 3.0.0

package/dist/blocks/e-commerce/reviews/review-list.js

@@ -0,0 +1,138 @@
+"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 review_list_exports = {};
+__export(review_list_exports, {
+  ReviewList: () => ReviewList,
+  default: () => review_list_default,
+  defaultReviewListLabels: () => defaultReviewListLabels
+});
+module.exports = __toCommonJS(review_list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_utils = require("../../../lib/utils.js");
+var import_button = require("../../../ui/button.js");
+var import_carousel = require("../../../ui/carousel.js");
+var import_review_card = require("./review-card.js");
+const defaultReviewListLabels = {
+  title: "Rese\xF1as",
+  description: "",
+  emptyLabel: "A\xFAn no hay rese\xF1as.",
+  previousLabel: "Anterior",
+  nextLabel: "Siguiente",
+  slideLabel: "Ir a la rese\xF1a {n}"
+};
+const interpolate = (template, values) => template.replace(
+  /\{(\w+)\}/g,
+  (match, key) => key in values ? String(values[key]) : match
+);
+function ReviewList({
+  reviews,
+  presentation = "list",
+  labels,
+  cardLabels,
+  onToggleLike,
+  onComment,
+  className
+}) {
+  const copy = { ...defaultReviewListLabels, ...labels };
+  const [api, setApi] = (0, import_react.useState)(void 0);
+  const [current, setCurrent] = (0, import_react.useState)(0);
+  const syncCurrent = (0, import_react.useCallback)((carousel) => {
+    if (!carousel) return;
+    setCurrent(carousel.selectedScrollSnap());
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!api) return;
+    syncCurrent(api);
+    api.on("select", syncCurrent);
+    return () => {
+      api.off("select", syncCurrent);
+    };
+  }, [api, syncCurrent]);
+  const renderCell = (review) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_review_card.ReviewCard,
+    {
+      id: review.id,
+      author: review.author,
+      ...review.avatar === void 0 ? {} : { avatar: review.avatar },
+      date: review.date,
+      ...review.dateTime === void 0 ? {} : { dateTime: review.dateTime },
+      rating: review.rating,
+      content: review.content,
+      ...review.helpfulCount === void 0 ? {} : { helpfulCount: review.helpfulCount },
+      ...review.likedByViewer === void 0 ? {} : { likedByViewer: review.likedByViewer },
+      ...cardLabels === void 0 ? {} : { labels: cardLabels },
+      ...onToggleLike === void 0 ? {} : { onToggleLike },
+      ...onComment === void 0 ? {} : { onComment }
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "section",
+    {
+      "aria-label": copy.title,
+      className: (0, import_utils.cn)("flex w-full flex-col gap-4", className),
+      "data-slot": "review-list",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-2xl font-semibold tracking-tight", children: copy.title }),
+          copy.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: copy.description }) : null
+        ] }),
+        reviews.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", className: "text-muted-foreground text-sm", "data-slot": "review-list-empty", children: copy.emptyLabel }) : presentation === "carousel" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative px-10", "data-slot": "review-carousel", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_carousel.Carousel, { setApi, opts: { align: "start", loop: reviews.length > 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselContent, { children: reviews.map((review) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselItem, { className: "md:basis-1/2 lg:basis-1/3", children: renderCell(review) }, review.id)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselPrevious, { "aria-label": copy.previousLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselNext, { "aria-label": copy.nextLabel })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 flex justify-center gap-2", children: reviews.map((review, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "flex size-6 cursor-pointer items-center justify-center rounded-full p-0",
+              "aria-label": interpolate(copy.slideLabel, { n: index + 1 }),
+              "aria-current": index === current ? "true" : void 0,
+              "data-slot": "review-carousel-dot",
+              onClick: () => api?.scrollTo(index),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: (0, import_utils.cn)(
+                    "size-2.5 rounded-full",
+                    index === current ? "bg-foreground" : "bg-muted"
+                  )
+                }
+              )
+            },
+            review.id
+          )) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", "data-slot": "review-list-grid", children: reviews.map((review) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: renderCell(review) }, review.id)) })
+      ]
+    }
+  );
+}
+var review_list_default = ReviewList;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReviewList,
+  defaultReviewListLabels
+});
+//# sourceMappingURL=review-list.js.map

package/dist/blocks/e-commerce/reviews/review-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/reviews/review-list.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\nimport { cn } from '../../../lib/utils'\nimport { Button } from '../../../ui/button'\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from '../../../ui/carousel'\nimport { ReviewCard, type ReviewCardLabels, type ReviewItemData } from './review-card'\n\n/** The two bounded structures the collection can render. */\nexport type ReviewListPresentation = 'list' | 'carousel'\n\n/** Every user-facing string the collection owns. Cell copy lives in `ReviewCard`. */\nexport interface ReviewListLabels {\n  title: string\n  description: string\n  emptyLabel: string\n  previousLabel: string\n  nextLabel: string\n  slideLabel: string\n}\n\nexport interface ReviewListProps {\n  /** Exactly the reviews to render: the host owns pagination and slicing. */\n  reviews: ReviewItemData[]\n  /**\n   * Bounded structure switch. `list` (default) renders a responsive grid;\n   * `carousel` renders the same cells in a scrollable carousel. Both accept the\n   * same data and report the same actions. Responsiveness is CSS only.\n   */\n  presentation?: ReviewListPresentation\n  labels?: Partial<ReviewListLabels>\n  cardLabels?: Partial<ReviewCardLabels>\n  /** Renders the like control on every cell; receives the backend review id. */\n  onToggleLike?: (id: string, liked: boolean) => void\n  /** Renders the comment control on every cell; receives the backend review id. */\n  onComment?: (id: string) => void\n  className?: string\n}\n\nexport const defaultReviewListLabels: ReviewListLabels = {\n  title: 'Reseñas',\n  description: '',\n  emptyLabel: 'Aún no hay reseñas.',\n  previousLabel: 'Anterior',\n  nextLabel: 'Siguiente',\n  slideLabel: 'Ir a la reseña {n}',\n}\n\nconst interpolate = (template: string, values: Record<string, string | number>) =>\n  template.replace(/\\{(\\w+)\\}/g, (match, key: string) =>\n    key in values ? String(values[key]) : match,\n  )\n\n/**\n * The canonical review collection section.\n *\n * It renders exactly the reviews it is given: pagination, ordering, loading and\n * error states belong to the host. The block slices no array, keeps no\n * engagement state, and measures no viewport.\n */\nexport function ReviewList({\n  reviews,\n  presentation = 'list',\n  labels,\n  cardLabels,\n  onToggleLike,\n  onComment,\n  className,\n}: ReviewListProps) {\n  const copy: ReviewListLabels = { ...defaultReviewListLabels, ...labels }\n  const [api, setApi] = useState<CarouselApi | undefined>(undefined)\n  const [current, setCurrent] = useState(0)\n\n  const syncCurrent = useCallback((carousel: CarouselApi | undefined) => {\n    if (!carousel) return\n    setCurrent(carousel.selectedScrollSnap())\n  }, [])\n\n  useEffect(() => {\n    if (!api) return\n    syncCurrent(api)\n    api.on('select', syncCurrent)\n    return () => {\n      api.off('select', syncCurrent)\n    }\n  }, [api, syncCurrent])\n\n  const renderCell = (review: ReviewItemData) => (\n    <ReviewCard\n      id={review.id}\n      author={review.author}\n      {...(review.avatar === undefined ? {} : { avatar: review.avatar })}\n      date={review.date}\n      {...(review.dateTime === undefined ? {} : { dateTime: review.dateTime })}\n      rating={review.rating}\n      content={review.content}\n      {...(review.helpfulCount === undefined ? {} : { helpfulCount: review.helpfulCount })}\n      {...(review.likedByViewer === undefined ? {} : { likedByViewer: review.likedByViewer })}\n      {...(cardLabels === undefined ? {} : { labels: cardLabels })}\n      {...(onToggleLike === undefined ? {} : { onToggleLike })}\n      {...(onComment === undefined ? {} : { onComment })}\n    />\n  )\n\n  return (\n    <section\n      aria-label={copy.title}\n      className={cn('flex w-full flex-col gap-4', className)}\n      data-slot='review-list'\n    >\n      <header className='flex flex-col gap-1'>\n        <h2 className='text-2xl font-semibold tracking-tight'>{copy.title}</h2>\n        {copy.description ? <p className='text-muted-foreground text-sm'>{copy.description}</p> : null}\n      </header>\n\n      {reviews.length === 0 ? (\n        <p role='status' className='text-muted-foreground text-sm' data-slot='review-list-empty'>\n          {copy.emptyLabel}\n        </p>\n      ) : presentation === 'carousel' ? (\n        <div className='relative px-10' data-slot='review-carousel'>\n          <Carousel setApi={setApi} opts={{ align: 'start', loop: reviews.length > 1 }}>\n            <CarouselContent>\n              {reviews.map((review) => (\n                <CarouselItem key={review.id} className='md:basis-1/2 lg:basis-1/3'>\n                  {renderCell(review)}\n                </CarouselItem>\n              ))}\n            </CarouselContent>\n            <CarouselPrevious aria-label={copy.previousLabel} />\n            <CarouselNext aria-label={copy.nextLabel} />\n          </Carousel>\n          <div className='mt-3 flex justify-center gap-2'>\n            {reviews.map((review, index) => (\n              <Button\n                key={review.id}\n                type='button'\n                variant='ghost'\n                size='sm'\n                className='flex size-6 cursor-pointer items-center justify-center rounded-full p-0'\n                aria-label={interpolate(copy.slideLabel, { n: index + 1 })}\n                aria-current={index === current ? 'true' : undefined}\n                data-slot='review-carousel-dot'\n                onClick={() => api?.scrollTo(index)}\n              >\n                <span\n                  aria-hidden='true'\n                  className={cn(\n                    'size-2.5 rounded-full',\n                    index === current ? 'bg-foreground' : 'bg-muted',\n                  )}\n                />\n              </Button>\n            ))}\n          </div>\n        </div>\n      ) : (\n        <ul className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3' data-slot='review-list-grid'>\n          {reviews.map((review) => (\n            <li key={review.id}>{renderCell(review)}</li>\n          ))}\n        </ul>\n      )}\n    </section>\n  )\n}\n\nexport default ReviewList\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+FI;AA7FJ,mBAAiD;AACjD,mBAAmB;AACnB,oBAAuB;AACvB,sBAOO;AACP,yBAAuE;AAiChE,MAAM,0BAA4C;AAAA,EACvD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,WAAW;AAAA,EACX,YAAY;AACd;AAEA,MAAM,cAAc,CAAC,UAAkB,WACrC,SAAS;AAAA,EAAQ;AAAA,EAAc,CAAC,OAAO,QACrC,OAAO,SAAS,OAAO,OAAO,GAAG,CAAC,IAAI;AACxC;AASK,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,OAAyB,EAAE,GAAG,yBAAyB,GAAG,OAAO;AACvE,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAkC,MAAS;AACjE,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,CAAC;AAExC,QAAM,kBAAc,0BAAY,CAAC,aAAsC;AACrE,QAAI,CAAC,SAAU;AACf,eAAW,SAAS,mBAAmB,CAAC;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,IAAK;AACV,gBAAY,GAAG;AACf,QAAI,GAAG,UAAU,WAAW;AAC5B,WAAO,MAAM;AACX,UAAI,IAAI,UAAU,WAAW;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,KAAK,WAAW,CAAC;AAErB,QAAM,aAAa,CAAC,WAClB;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,OAAO;AAAA,MACX,QAAQ,OAAO;AAAA,MACd,GAAI,OAAO,WAAW,SAAY,CAAC,IAAI,EAAE,QAAQ,OAAO,OAAO;AAAA,MAChE,MAAM,OAAO;AAAA,MACZ,GAAI,OAAO,aAAa,SAAY,CAAC,IAAI,EAAE,UAAU,OAAO,SAAS;AAAA,MACtE,QAAQ,OAAO;AAAA,MACf,SAAS,OAAO;AAAA,MACf,GAAI,OAAO,iBAAiB,SAAY,CAAC,IAAI,EAAE,cAAc,OAAO,aAAa;AAAA,MACjF,GAAI,OAAO,kBAAkB,SAAY,CAAC,IAAI,EAAE,eAAe,OAAO,cAAc;AAAA,MACpF,GAAI,eAAe,SAAY,CAAC,IAAI,EAAE,QAAQ,WAAW;AAAA,MACzD,GAAI,iBAAiB,SAAY,CAAC,IAAI,EAAE,aAAa;AAAA,MACrD,GAAI,cAAc,SAAY,CAAC,IAAI,EAAE,UAAU;AAAA;AAAA,EAClD;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,KAAK;AAAA,MACjB,eAAW,iBAAG,8BAA8B,SAAS;AAAA,MACrD,aAAU;AAAA,MAEV;AAAA,qDAAC,YAAO,WAAU,uBAChB;AAAA,sDAAC,QAAG,WAAU,yCAAyC,eAAK,OAAM;AAAA,UACjE,KAAK,cAAc,4CAAC,OAAE,WAAU,iCAAiC,eAAK,aAAY,IAAO;AAAA,WAC5F;AAAA,QAEC,QAAQ,WAAW,IAClB,4CAAC,OAAE,MAAK,UAAS,WAAU,iCAAgC,aAAU,qBAClE,eAAK,YACR,IACE,iBAAiB,aACnB,6CAAC,SAAI,WAAU,kBAAiB,aAAU,mBACxC;AAAA,uDAAC,4BAAS,QAAgB,MAAM,EAAE,OAAO,SAAS,MAAM,QAAQ,SAAS,EAAE,GACzE;AAAA,wDAAC,mCACE,kBAAQ,IAAI,CAAC,WACZ,4CAAC,gCAA6B,WAAU,6BACrC,qBAAW,MAAM,KADD,OAAO,EAE1B,CACD,GACH;AAAA,YACA,4CAAC,oCAAiB,cAAY,KAAK,eAAe;AAAA,YAClD,4CAAC,gCAAa,cAAY,KAAK,WAAW;AAAA,aAC5C;AAAA,UACA,4CAAC,SAAI,WAAU,kCACZ,kBAAQ,IAAI,CAAC,QAAQ,UACpB;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAY,YAAY,KAAK,YAAY,EAAE,GAAG,QAAQ,EAAE,CAAC;AAAA,cACzD,gBAAc,UAAU,UAAU,SAAS;AAAA,cAC3C,aAAU;AAAA,cACV,SAAS,MAAM,KAAK,SAAS,KAAK;AAAA,cAElC;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,eAAW;AAAA,oBACT;AAAA,oBACA,UAAU,UAAU,kBAAkB;AAAA,kBACxC;AAAA;AAAA,cACF;AAAA;AAAA,YAhBK,OAAO;AAAA,UAiBd,CACD,GACH;AAAA,WACF,IAEA,4CAAC,QAAG,WAAU,4CAA2C,aAAU,oBAChE,kBAAQ,IAAI,CAAC,WACZ,4CAAC,QAAoB,qBAAW,MAAM,KAA7B,OAAO,EAAwB,CACzC,GACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/blocks/e-commerce/reviews/review-list.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../../ui/button.mjs";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious
+} from "../../../ui/carousel.mjs";
+import { ReviewCard } from "./review-card.mjs";
+const defaultReviewListLabels = {
+  title: "Rese\xF1as",
+  description: "",
+  emptyLabel: "A\xFAn no hay rese\xF1as.",
+  previousLabel: "Anterior",
+  nextLabel: "Siguiente",
+  slideLabel: "Ir a la rese\xF1a {n}"
+};
+const interpolate = (template, values) => template.replace(
+  /\{(\w+)\}/g,
+  (match, key) => key in values ? String(values[key]) : match
+);
+function ReviewList({
+  reviews,
+  presentation = "list",
+  labels,
+  cardLabels,
+  onToggleLike,
+  onComment,
+  className
+}) {
+  const copy = { ...defaultReviewListLabels, ...labels };
+  const [api, setApi] = useState(void 0);
+  const [current, setCurrent] = useState(0);
+  const syncCurrent = useCallback((carousel) => {
+    if (!carousel) return;
+    setCurrent(carousel.selectedScrollSnap());
+  }, []);
+  useEffect(() => {
+    if (!api) return;
+    syncCurrent(api);
+    api.on("select", syncCurrent);
+    return () => {
+      api.off("select", syncCurrent);
+    };
+  }, [api, syncCurrent]);
+  const renderCell = (review) => /* @__PURE__ */ jsx(
+    ReviewCard,
+    {
+      id: review.id,
+      author: review.author,
+      ...review.avatar === void 0 ? {} : { avatar: review.avatar },
+      date: review.date,
+      ...review.dateTime === void 0 ? {} : { dateTime: review.dateTime },
+      rating: review.rating,
+      content: review.content,
+      ...review.helpfulCount === void 0 ? {} : { helpfulCount: review.helpfulCount },
+      ...review.likedByViewer === void 0 ? {} : { likedByViewer: review.likedByViewer },
+      ...cardLabels === void 0 ? {} : { labels: cardLabels },
+      ...onToggleLike === void 0 ? {} : { onToggleLike },
+      ...onComment === void 0 ? {} : { onComment }
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": copy.title,
+      className: cn("flex w-full flex-col gap-4", className),
+      "data-slot": "review-list",
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: copy.title }),
+          copy.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: copy.description }) : null
+        ] }),
+        reviews.length === 0 ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-muted-foreground text-sm", "data-slot": "review-list-empty", children: copy.emptyLabel }) : presentation === "carousel" ? /* @__PURE__ */ jsxs("div", { className: "relative px-10", "data-slot": "review-carousel", children: [
+          /* @__PURE__ */ jsxs(Carousel, { setApi, opts: { align: "start", loop: reviews.length > 1 }, children: [
+            /* @__PURE__ */ jsx(CarouselContent, { children: reviews.map((review) => /* @__PURE__ */ jsx(CarouselItem, { className: "md:basis-1/2 lg:basis-1/3", children: renderCell(review) }, review.id)) }),
+            /* @__PURE__ */ jsx(CarouselPrevious, { "aria-label": copy.previousLabel }),
+            /* @__PURE__ */ jsx(CarouselNext, { "aria-label": copy.nextLabel })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-center gap-2", children: reviews.map((review, index) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "flex size-6 cursor-pointer items-center justify-center rounded-full p-0",
+              "aria-label": interpolate(copy.slideLabel, { n: index + 1 }),
+              "aria-current": index === current ? "true" : void 0,
+              "data-slot": "review-carousel-dot",
+              onClick: () => api?.scrollTo(index),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "size-2.5 rounded-full",
+                    index === current ? "bg-foreground" : "bg-muted"
+                  )
+                }
+              )
+            },
+            review.id
+          )) })
+        ] }) : /* @__PURE__ */ jsx("ul", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", "data-slot": "review-list-grid", children: reviews.map((review) => /* @__PURE__ */ jsx("li", { children: renderCell(review) }, review.id)) })
+      ]
+    }
+  );
+}
+var review_list_default = ReviewList;
+export {
+  ReviewList,
+  review_list_default as default,
+  defaultReviewListLabels
+};
+//# sourceMappingURL=review-list.mjs.map

package/dist/blocks/e-commerce/reviews/review-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/reviews/review-list.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\nimport { cn } from '../../../lib/utils'\nimport { Button } from '../../../ui/button'\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from '../../../ui/carousel'\nimport { ReviewCard, type ReviewCardLabels, type ReviewItemData } from './review-card'\n\n/** The two bounded structures the collection can render. */\nexport type ReviewListPresentation = 'list' | 'carousel'\n\n/** Every user-facing string the collection owns. Cell copy lives in `ReviewCard`. */\nexport interface ReviewListLabels {\n  title: string\n  description: string\n  emptyLabel: string\n  previousLabel: string\n  nextLabel: string\n  slideLabel: string\n}\n\nexport interface ReviewListProps {\n  /** Exactly the reviews to render: the host owns pagination and slicing. */\n  reviews: ReviewItemData[]\n  /**\n   * Bounded structure switch. `list` (default) renders a responsive grid;\n   * `carousel` renders the same cells in a scrollable carousel. Both accept the\n   * same data and report the same actions. Responsiveness is CSS only.\n   */\n  presentation?: ReviewListPresentation\n  labels?: Partial<ReviewListLabels>\n  cardLabels?: Partial<ReviewCardLabels>\n  /** Renders the like control on every cell; receives the backend review id. */\n  onToggleLike?: (id: string, liked: boolean) => void\n  /** Renders the comment control on every cell; receives the backend review id. */\n  onComment?: (id: string) => void\n  className?: string\n}\n\nexport const defaultReviewListLabels: ReviewListLabels = {\n  title: 'Reseñas',\n  description: '',\n  emptyLabel: 'Aún no hay reseñas.',\n  previousLabel: 'Anterior',\n  nextLabel: 'Siguiente',\n  slideLabel: 'Ir a la reseña {n}',\n}\n\nconst interpolate = (template: string, values: Record<string, string | number>) =>\n  template.replace(/\\{(\\w+)\\}/g, (match, key: string) =>\n    key in values ? String(values[key]) : match,\n  )\n\n/**\n * The canonical review collection section.\n *\n * It renders exactly the reviews it is given: pagination, ordering, loading and\n * error states belong to the host. The block slices no array, keeps no\n * engagement state, and measures no viewport.\n */\nexport function ReviewList({\n  reviews,\n  presentation = 'list',\n  labels,\n  cardLabels,\n  onToggleLike,\n  onComment,\n  className,\n}: ReviewListProps) {\n  const copy: ReviewListLabels = { ...defaultReviewListLabels, ...labels }\n  const [api, setApi] = useState<CarouselApi | undefined>(undefined)\n  const [current, setCurrent] = useState(0)\n\n  const syncCurrent = useCallback((carousel: CarouselApi | undefined) => {\n    if (!carousel) return\n    setCurrent(carousel.selectedScrollSnap())\n  }, [])\n\n  useEffect(() => {\n    if (!api) return\n    syncCurrent(api)\n    api.on('select', syncCurrent)\n    return () => {\n      api.off('select', syncCurrent)\n    }\n  }, [api, syncCurrent])\n\n  const renderCell = (review: ReviewItemData) => (\n    <ReviewCard\n      id={review.id}\n      author={review.author}\n      {...(review.avatar === undefined ? {} : { avatar: review.avatar })}\n      date={review.date}\n      {...(review.dateTime === undefined ? {} : { dateTime: review.dateTime })}\n      rating={review.rating}\n      content={review.content}\n      {...(review.helpfulCount === undefined ? {} : { helpfulCount: review.helpfulCount })}\n      {...(review.likedByViewer === undefined ? {} : { likedByViewer: review.likedByViewer })}\n      {...(cardLabels === undefined ? {} : { labels: cardLabels })}\n      {...(onToggleLike === undefined ? {} : { onToggleLike })}\n      {...(onComment === undefined ? {} : { onComment })}\n    />\n  )\n\n  return (\n    <section\n      aria-label={copy.title}\n      className={cn('flex w-full flex-col gap-4', className)}\n      data-slot='review-list'\n    >\n      <header className='flex flex-col gap-1'>\n        <h2 className='text-2xl font-semibold tracking-tight'>{copy.title}</h2>\n        {copy.description ? <p className='text-muted-foreground text-sm'>{copy.description}</p> : null}\n      </header>\n\n      {reviews.length === 0 ? (\n        <p role='status' className='text-muted-foreground text-sm' data-slot='review-list-empty'>\n          {copy.emptyLabel}\n        </p>\n      ) : presentation === 'carousel' ? (\n        <div className='relative px-10' data-slot='review-carousel'>\n          <Carousel setApi={setApi} opts={{ align: 'start', loop: reviews.length > 1 }}>\n            <CarouselContent>\n              {reviews.map((review) => (\n                <CarouselItem key={review.id} className='md:basis-1/2 lg:basis-1/3'>\n                  {renderCell(review)}\n                </CarouselItem>\n              ))}\n            </CarouselContent>\n            <CarouselPrevious aria-label={copy.previousLabel} />\n            <CarouselNext aria-label={copy.nextLabel} />\n          </Carousel>\n          <div className='mt-3 flex justify-center gap-2'>\n            {reviews.map((review, index) => (\n              <Button\n                key={review.id}\n                type='button'\n                variant='ghost'\n                size='sm'\n                className='flex size-6 cursor-pointer items-center justify-center rounded-full p-0'\n                aria-label={interpolate(copy.slideLabel, { n: index + 1 })}\n                aria-current={index === current ? 'true' : undefined}\n                data-slot='review-carousel-dot'\n                onClick={() => api?.scrollTo(index)}\n              >\n                <span\n                  aria-hidden='true'\n                  className={cn(\n                    'size-2.5 rounded-full',\n                    index === current ? 'bg-foreground' : 'bg-muted',\n                  )}\n                />\n              </Button>\n            ))}\n          </div>\n        </div>\n      ) : (\n        <ul className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3' data-slot='review-list-grid'>\n          {reviews.map((review) => (\n            <li key={review.id}>{renderCell(review)}</li>\n          ))}\n        </ul>\n      )}\n    </section>\n  )\n}\n\nexport default ReviewList\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/reviews/review-summary.d.ts

@@ -0,0 +1,49 @@
+/** The rating values the aggregate reports, from worst to best. */
+export type ReviewRatingValue = 1 | 2 | 3 | 4 | 5;
+/**
+ * A complete 1–5 count distribution. Every value is required: a partial
+ * distribution would let the summary render a total it cannot account for.
+ */
+export type ReviewDistribution = Record<ReviewRatingValue, number>;
+/** Every user-facing string the summary renders. All are overridable. */
+export interface ReviewSummaryLabels {
+    title: string;
+    basedOnLabel: string;
+    ratingLabel: string;
+    distributionLabel: string;
+    rowLabel: string;
+    /** Singular form for a one-star row; falls back to `rowLabel`. */
+    rowSingularLabel?: string;
+}
+export interface ReviewSummaryProps {
+    /** Host-supplied average. The summary never computes one from reviews. */
+    averageRating: number;
+    /** Host-supplied total the distribution accounts for. */
+    totalReviews: number;
+    /** Complete 1–5 counts. Required: the summary never invents a value. */
+    distribution: ReviewDistribution;
+    labels?: Partial<ReviewSummaryLabels>;
+    /** Locale used to format the average and the percentages. */
+    locale?: string;
+    className?: string;
+}
+export declare const defaultReviewSummaryLabels: ReviewSummaryLabels;
+/**
+ * Percentage of the total a count represents.
+ *
+ * A zero total renders `0`, never `NaN`: the denominator is the host's
+ * `totalReviews`, never the largest count in the distribution.
+ */
+export declare function reviewPercentage(count: number, total: number): number;
+/**
+ * The canonical aggregate unit of the review family.
+ *
+ * It renders exactly the aggregate it is given: `averageRating`, `totalReviews`
+ * and a complete 1–5 `distribution` are required, so the summary can never
+ * derive an average from review content, fill five stars by default, or divide
+ * a bar by the largest count. Composition with the review collection is the
+ * host's decision; this unit accepts no reviews.
+ */
+export declare function ReviewSummary({ averageRating, totalReviews, distribution, labels, locale, className, }: ReviewSummaryProps): import("react").JSX.Element;
+export default ReviewSummary;
+//# sourceMappingURL=review-summary.d.ts.map

package/dist/blocks/e-commerce/reviews/review-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-summary.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/reviews/review-summary.tsx"],"names":[],"mappings":"AAIA,mEAAmE;AACnE,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAEjD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAA;AAElE,yEAAyE;AACzE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,0EAA0E;IAC1E,aAAa,EAAE,MAAM,CAAA;IACrB,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAA;IACpB,wEAAwE;IACxE,YAAY,EAAE,kBAAkB,CAAA;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACrC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,0BAA0B,EAAE,mBAOxC,CAAA;AASD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGrE;AAUD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE,kBAAkB,+BAiFpB;AAED,eAAe,aAAa,CAAA"}

package/dist/blocks/e-commerce/reviews/review-summary.js

@@ -0,0 +1,150 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var review_summary_exports = {};
+__export(review_summary_exports, {
+  ReviewSummary: () => ReviewSummary,
+  default: () => review_summary_default,
+  defaultReviewSummaryLabels: () => defaultReviewSummaryLabels,
+  reviewPercentage: () => reviewPercentage
+});
+module.exports = __toCommonJS(review_summary_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_utils = require("../../../lib/utils.js");
+var import_review_card = require("./review-card.js");
+const defaultReviewSummaryLabels = {
+  title: "Valoraci\xF3n general",
+  basedOnLabel: "Basado en {n} rese\xF1as",
+  ratingLabel: "{n} de 5",
+  distributionLabel: "Distribuci\xF3n de valoraciones",
+  rowLabel: "{rating} estrellas: {count}",
+  rowSingularLabel: "{rating} estrella: {count}"
+};
+const RATING_VALUES = [5, 4, 3, 2, 1];
+const interpolate = (template, values) => template.replace(
+  /\{(\w+)\}/g,
+  (match, key) => key in values ? String(values[key]) : match
+);
+function reviewPercentage(count, total) {
+  if (!Number.isFinite(count) || !Number.isFinite(total) || total <= 0) return 0;
+  return Math.round(count / total * 100);
+}
+function formatAverage(value, locale) {
+  if (!Number.isFinite(value)) return "0";
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1
+  }).format(value);
+}
+function ReviewSummary({
+  averageRating,
+  totalReviews,
+  distribution,
+  labels,
+  locale,
+  className
+}) {
+  const copy = { ...defaultReviewSummaryLabels, ...labels };
+  const average = formatAverage(averageRating, locale);
+  const filled = (0, import_review_card.clampRating)(averageRating);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_utils.cn)("flex flex-col gap-4", className),
+      "data-slot": "review-summary",
+      "aria-label": copy.title,
+      role: "group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-base font-semibold", "data-slot": "review-summary-title", children: copy.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-3xl font-semibold tabular-nums", "data-slot": "review-summary-average", children: average }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              role: "img",
+              "aria-label": interpolate(copy.ratingLabel, { n: average }),
+              className: "flex items-center gap-0.5",
+              "data-slot": "review-summary-rating",
+              children: Array.from(
+                { length: 5 },
+                (_, index) => index < filled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-slot": "review-summary-star-filled", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Star, { "aria-hidden": "true", className: "size-4 fill-current text-foreground" }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-slot": "review-summary-star-empty", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Star, { "aria-hidden": "true", className: "text-muted-foreground size-4" }) }, index)
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", "data-slot": "review-summary-total", children: interpolate(copy.basedOnLabel, { n: totalReviews }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", "data-slot": "review-distribution", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium", children: copy.distributionLabel }),
+          RATING_VALUES.map((rating) => {
+            const count = distribution[rating] ?? 0;
+            const percentage = reviewPercentage(count, totalReviews);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                className: "flex items-center gap-2",
+                "data-slot": "review-distribution-row",
+                "data-rating": rating,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground w-24 text-xs tabular-nums", children: interpolate(rating === 1 ? copy.rowSingularLabel ?? copy.rowLabel : copy.rowLabel, {
+                    rating,
+                    count
+                  }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "bg-muted relative h-2 flex-1 overflow-hidden rounded-full",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          className: "bg-primary absolute inset-y-0 left-0 rounded-full",
+                          style: { width: `${percentage}%` }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "span",
+                    {
+                      className: "w-9 text-right text-xs tabular-nums",
+                      "data-slot": "review-distribution-percentage",
+                      children: [
+                        percentage,
+                        "%"
+                      ]
+                    }
+                  )
+                ]
+              },
+              rating
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+var review_summary_default = ReviewSummary;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReviewSummary,
+  defaultReviewSummaryLabels,
+  reviewPercentage
+});
+//# sourceMappingURL=review-summary.js.map

package/dist/blocks/e-commerce/reviews/review-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/reviews/review-summary.tsx"],"sourcesContent":["import { Star } from 'lucide-react'\nimport { cn } from '../../../lib/utils'\nimport { clampRating } from './review-card'\n\n/** The rating values the aggregate reports, from worst to best. */\nexport type ReviewRatingValue = 1 | 2 | 3 | 4 | 5\n\n/**\n * A complete 1–5 count distribution. Every value is required: a partial\n * distribution would let the summary render a total it cannot account for.\n */\nexport type ReviewDistribution = Record<ReviewRatingValue, number>\n\n/** Every user-facing string the summary renders. All are overridable. */\nexport interface ReviewSummaryLabels {\n  title: string\n  basedOnLabel: string\n  ratingLabel: string\n  distributionLabel: string\n  rowLabel: string\n  /** Singular form for a one-star row; falls back to `rowLabel`. */\n  rowSingularLabel?: string\n}\n\nexport interface ReviewSummaryProps {\n  /** Host-supplied average. The summary never computes one from reviews. */\n  averageRating: number\n  /** Host-supplied total the distribution accounts for. */\n  totalReviews: number\n  /** Complete 1–5 counts. Required: the summary never invents a value. */\n  distribution: ReviewDistribution\n  labels?: Partial<ReviewSummaryLabels>\n  /** Locale used to format the average and the percentages. */\n  locale?: string\n  className?: string\n}\n\nexport const defaultReviewSummaryLabels: ReviewSummaryLabels = {\n  title: 'Valoración general',\n  basedOnLabel: 'Basado en {n} reseñas',\n  ratingLabel: '{n} de 5',\n  distributionLabel: 'Distribución de valoraciones',\n  rowLabel: '{rating} estrellas: {count}',\n  rowSingularLabel: '{rating} estrella: {count}',\n}\n\nconst RATING_VALUES: ReviewRatingValue[] = [5, 4, 3, 2, 1]\n\nconst interpolate = (template: string, values: Record<string, string | number>) =>\n  template.replace(/\\{(\\w+)\\}/g, (match, key: string) =>\n    key in values ? String(values[key]) : match,\n  )\n\n/**\n * Percentage of the total a count represents.\n *\n * A zero total renders `0`, never `NaN`: the denominator is the host's\n * `totalReviews`, never the largest count in the distribution.\n */\nexport function reviewPercentage(count: number, total: number): number {\n  if (!Number.isFinite(count) || !Number.isFinite(total) || total <= 0) return 0\n  return Math.round((count / total) * 100)\n}\n\nfunction formatAverage(value: number, locale: string | undefined): string {\n  if (!Number.isFinite(value)) return '0'\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 1,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\n/**\n * The canonical aggregate unit of the review family.\n *\n * It renders exactly the aggregate it is given: `averageRating`, `totalReviews`\n * and a complete 1–5 `distribution` are required, so the summary can never\n * derive an average from review content, fill five stars by default, or divide\n * a bar by the largest count. Composition with the review collection is the\n * host's decision; this unit accepts no reviews.\n */\nexport function ReviewSummary({\n  averageRating,\n  totalReviews,\n  distribution,\n  labels,\n  locale,\n  className,\n}: ReviewSummaryProps) {\n  const copy: ReviewSummaryLabels = { ...defaultReviewSummaryLabels, ...labels }\n  const average = formatAverage(averageRating, locale)\n  const filled = clampRating(averageRating)\n\n  return (\n    <div\n      className={cn('flex flex-col gap-4', className)}\n      data-slot='review-summary'\n      aria-label={copy.title}\n      role='group'\n    >\n      <div className='flex flex-col gap-1'>\n        <h3 className='text-base font-semibold' data-slot='review-summary-title'>\n          {copy.title}\n        </h3>\n        <p className='text-3xl font-semibold tabular-nums' data-slot='review-summary-average'>\n          {average}\n        </p>\n        <div\n          role='img'\n          aria-label={interpolate(copy.ratingLabel, { n: average })}\n          className='flex items-center gap-0.5'\n          data-slot='review-summary-rating'\n        >\n          {Array.from({ length: 5 }, (_, index) =>\n            index < filled ? (\n              <span key={index} data-slot='review-summary-star-filled'>\n                <Star aria-hidden='true' className='size-4 fill-current text-foreground' />\n              </span>\n            ) : (\n              <span key={index} data-slot='review-summary-star-empty'>\n                <Star aria-hidden='true' className='text-muted-foreground size-4' />\n              </span>\n            ),\n          )}\n        </div>\n        <p className='text-muted-foreground text-sm' data-slot='review-summary-total'>\n          {interpolate(copy.basedOnLabel, { n: totalReviews })}\n        </p>\n      </div>\n\n      <div className='flex flex-col gap-2' data-slot='review-distribution'>\n        <p className='text-sm font-medium'>{copy.distributionLabel}</p>\n        {RATING_VALUES.map((rating) => {\n          const count = distribution[rating] ?? 0\n          const percentage = reviewPercentage(count, totalReviews)\n          return (\n            <div\n              key={rating}\n              className='flex items-center gap-2'\n              data-slot='review-distribution-row'\n              data-rating={rating}\n            >\n              <span className='text-muted-foreground w-24 text-xs tabular-nums'>\n                {interpolate(rating === 1 ? (copy.rowSingularLabel ?? copy.rowLabel) : copy.rowLabel, {\n                  rating,\n                  count,\n                })}\n              </span>\n              <span\n                aria-hidden='true'\n                className='bg-muted relative h-2 flex-1 overflow-hidden rounded-full'\n              >\n                <span\n                  className='bg-primary absolute inset-y-0 left-0 rounded-full'\n                  style={{ width: `${percentage}%` }}\n                />\n              </span>\n              <span\n                className='w-9 text-right text-xs tabular-nums'\n                data-slot='review-distribution-percentage'\n              >\n                {percentage}%\n              </span>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default ReviewSummary\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/reviews/review-summary.mjs

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Star } from "lucide-react";
+import { cn } from "../../../lib/utils.mjs";
+import { clampRating } from "./review-card.mjs";
+const defaultReviewSummaryLabels = {
+  title: "Valoraci\xF3n general",
+  basedOnLabel: "Basado en {n} rese\xF1as",
+  ratingLabel: "{n} de 5",
+  distributionLabel: "Distribuci\xF3n de valoraciones",
+  rowLabel: "{rating} estrellas: {count}",
+  rowSingularLabel: "{rating} estrella: {count}"
+};
+const RATING_VALUES = [5, 4, 3, 2, 1];
+const interpolate = (template, values) => template.replace(
+  /\{(\w+)\}/g,
+  (match, key) => key in values ? String(values[key]) : match
+);
+function reviewPercentage(count, total) {
+  if (!Number.isFinite(count) || !Number.isFinite(total) || total <= 0) return 0;
+  return Math.round(count / total * 100);
+}
+function formatAverage(value, locale) {
+  if (!Number.isFinite(value)) return "0";
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1
+  }).format(value);
+}
+function ReviewSummary({
+  averageRating,
+  totalReviews,
+  distribution,
+  labels,
+  locale,
+  className
+}) {
+  const copy = { ...defaultReviewSummaryLabels, ...labels };
+  const average = formatAverage(averageRating, locale);
+  const filled = clampRating(averageRating);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-4", className),
+      "data-slot": "review-summary",
+      "aria-label": copy.title,
+      role: "group",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", "data-slot": "review-summary-title", children: copy.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-3xl font-semibold tabular-nums", "data-slot": "review-summary-average", children: average }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "img",
+              "aria-label": interpolate(copy.ratingLabel, { n: average }),
+              className: "flex items-center gap-0.5",
+              "data-slot": "review-summary-rating",
+              children: Array.from(
+                { length: 5 },
+                (_, index) => index < filled ? /* @__PURE__ */ jsx("span", { "data-slot": "review-summary-star-filled", children: /* @__PURE__ */ jsx(Star, { "aria-hidden": "true", className: "size-4 fill-current text-foreground" }) }, index) : /* @__PURE__ */ jsx("span", { "data-slot": "review-summary-star-empty", children: /* @__PURE__ */ jsx(Star, { "aria-hidden": "true", className: "text-muted-foreground size-4" }) }, index)
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", "data-slot": "review-summary-total", children: interpolate(copy.basedOnLabel, { n: totalReviews }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-slot": "review-distribution", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: copy.distributionLabel }),
+          RATING_VALUES.map((rating) => {
+            const count = distribution[rating] ?? 0;
+            const percentage = reviewPercentage(count, totalReviews);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center gap-2",
+                "data-slot": "review-distribution-row",
+                "data-rating": rating,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-24 text-xs tabular-nums", children: interpolate(rating === 1 ? copy.rowSingularLabel ?? copy.rowLabel : copy.rowLabel, {
+                    rating,
+                    count
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "bg-muted relative h-2 flex-1 overflow-hidden rounded-full",
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "bg-primary absolute inset-y-0 left-0 rounded-full",
+                          style: { width: `${percentage}%` }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "w-9 text-right text-xs tabular-nums",
+                      "data-slot": "review-distribution-percentage",
+                      children: [
+                        percentage,
+                        "%"
+                      ]
+                    }
+                  )
+                ]
+              },
+              rating
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+var review_summary_default = ReviewSummary;
+export {
+  ReviewSummary,
+  review_summary_default as default,
+  defaultReviewSummaryLabels,
+  reviewPercentage
+};
+//# sourceMappingURL=review-summary.mjs.map