@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/reviews/review-card.tsx"],"sourcesContent":["import { MessageSquare, Star, ThumbsUp } from 'lucide-react'\nimport { cn } from '../../../lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardFooter, CardHeader } from '../../../ui/card'\n\n/**\n * Canonical review item data.\n *\n * One customer review. `id` is the backend identity — the React key and the\n * value every action reports; it is never rendered. `date` is a display string\n * the host already formatted, and `dateTime` is the optional machine-readable\n * value: the cell emits it only when it parses, so an unparsable date can never\n * throw. `helpfulCount` and `likedByViewer` are host-authoritative engagement:\n * the cell renders them and reports intent, it never increments either.\n */\nexport interface ReviewItemData {\n  /** Backend review identity. Used as the React key; never rendered. */\n  id: string\n  author: string\n  /** Optional; an absent or empty avatar renders initials, never `src=\"\"`. */\n  avatar?: string\n  /** Display date, rendered verbatim. */\n  date: string\n  /** Optional ISO-8601 value; emitted only when it parses as a date. */\n  dateTime?: string\n  /** Rating from 1 to 5. Missing or out-of-range values are clamped for display. */\n  rating: number\n  content: string\n  /** Supplied helpful count. Absent means unknown, never zero. */\n  helpfulCount?: number\n  /** Host-owned viewer state: the like control reflects it and never toggles it. */\n  likedByViewer?: boolean\n}\n\n/** Every user-facing string the cell renders. All are overridable. */\nexport interface ReviewCardLabels {\n  ratingLabel: string\n  helpfulLabel: string\n  likeLabel: string\n  unlikeLabel: string\n  commentLabel: string\n}\n\nexport interface ReviewCardProps extends Omit<ReviewItemData, 'id'> {\n  /** Backend review identity, reported to the action handlers. */\n  id: string\n  labels?: Partial<ReviewCardLabels>\n  /** Renders the like control; receives the backend id and the intended state. */\n  onToggleLike?: (id: string, liked: boolean) => void\n  /** Renders the comment control; receives the backend id. */\n  onComment?: (id: string) => void\n  className?: string\n}\n\nexport const defaultReviewCardLabels: ReviewCardLabels = {\n  ratingLabel: '{n} de 5 estrellas',\n  helpfulLabel: 'A {n} personas les resultó útil',\n  likeLabel: 'Me gusta',\n  unlikeLabel: 'Quitar me gusta',\n  commentLabel: 'Comentar',\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/** Clamp a rating to the 1–5 range the star row can express. */\nexport function clampRating(rating: number): number {\n  if (!Number.isFinite(rating)) return 0\n  return Math.min(5, Math.max(0, Math.round(rating)))\n}\n\n/** Emit a `dateTime` attribute only when the value is a real date. */\nexport function safeDateTime(value: string | undefined): string | undefined {\n  if (value === undefined) return undefined\n  const trimmed = value.trim()\n  if (trimmed === '') return undefined\n  return Number.isNaN(Date.parse(trimmed)) ? undefined : trimmed\n}\n\n/**\n * The canonical review item cell: one customer review.\n *\n * It is an item cell, not a listing — it takes one review, renders one cell,\n * and owns no engagement state. Actions exist only when their handler exists.\n */\nexport function ReviewCard({\n  id,\n  author,\n  avatar,\n  date,\n  dateTime,\n  rating,\n  content,\n  helpfulCount,\n  likedByViewer,\n  labels,\n  onToggleLike,\n  onComment,\n  className,\n}: ReviewCardProps) {\n  const copy: ReviewCardLabels = { ...defaultReviewCardLabels, ...labels }\n  const filled = clampRating(rating)\n  const avatarSrc = typeof avatar === 'string' && avatar.trim() !== '' ? avatar : undefined\n  const initials = author.trim().slice(0, 2).toUpperCase()\n  const machineDate = safeDateTime(dateTime)\n  const liked = likedByViewer === true\n\n  return (\n    <article className={cn('h-full', className)} data-slot='review-card'>\n      <Card className='flex h-full flex-col'>\n        <CardHeader className='gap-3'>\n          <div className='flex items-start gap-3'>\n            <Avatar className='size-10'>\n              {avatarSrc ? <AvatarImage src={avatarSrc} alt='' /> : null}\n              <AvatarFallback aria-hidden='true'>{initials}</AvatarFallback>\n            </Avatar>\n            <div className='flex min-w-0 flex-1 flex-col gap-0.5'>\n              <h3 className='truncate text-sm font-semibold' data-slot='review-author'>\n                {author}\n              </h3>\n              <time\n                className='text-muted-foreground text-xs'\n                {...(machineDate === undefined ? {} : { dateTime: machineDate })}\n                data-slot='review-date'\n              >\n                {date}\n              </time>\n            </div>\n          </div>\n          <div\n            role='img'\n            aria-label={interpolate(copy.ratingLabel, { n: filled })}\n            className='flex items-center gap-0.5'\n            data-slot='review-rating'\n          >\n            {Array.from({ length: 5 }, (_, index) => (\n              <Star\n                key={index}\n                aria-hidden='true'\n                className={cn(\n                  'size-4',\n                  index < filled ? 'fill-current text-foreground' : 'text-muted-foreground',\n                )}\n              />\n            ))}\n          </div>\n        </CardHeader>\n        <CardContent className='flex-1'>\n          <p className='text-sm whitespace-pre-line' data-slot='review-content'>\n            {content}\n          </p>\n        </CardContent>\n        {onToggleLike || onComment || helpfulCount !== undefined ? (\n          <CardFooter className='flex flex-wrap items-center gap-2 border-t pt-3'>\n            {onToggleLike ? (\n              <Button\n                type='button'\n                variant='ghost'\n                size='sm'\n                className='h-8 cursor-pointer gap-1.5 px-2 text-xs'\n                aria-pressed={liked}\n                aria-label={liked ? copy.unlikeLabel : copy.likeLabel}\n                data-slot='review-like'\n                onClick={() => onToggleLike(id, !liked)}\n              >\n                <ThumbsUp aria-hidden='true' className='size-3.5' />\n                <span data-slot='review-like-count'>{helpfulCount ?? ''}</span>\n              </Button>\n            ) : helpfulCount !== undefined ? (\n              <span className='text-muted-foreground flex items-center gap-1.5 text-xs'>\n                <ThumbsUp aria-hidden='true' className='size-3.5' />\n                {interpolate(copy.helpfulLabel, { n: helpfulCount })}\n              </span>\n            ) : null}\n            {onComment ? (\n              <Button\n                type='button'\n                variant='ghost'\n                size='sm'\n                className='h-8 cursor-pointer gap-1.5 px-2 text-xs'\n                aria-label={copy.commentLabel}\n                data-slot='review-comment'\n                onClick={() => onComment(id)}\n              >\n                <MessageSquare aria-hidden='true' className='size-3.5' />\n                {copy.commentLabel}\n              </Button>\n            ) : null}\n          </CardFooter>\n        ) : null}\n      </Card>\n    </article>\n  )\n}\n\nexport default ReviewCard\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,50 @@
+/** The value the composer reports for one submission. */
+export interface ReviewComposerData {
+    name: string;
+    email: string;
+    content: string;
+    rating: number;
+}
+/** Every user-facing string the composer owns. All are overridable. */
+export interface ReviewComposerLabels {
+    title: string;
+    description: string;
+    ratingLabel: string;
+    starLabel: string;
+    nameLabel: string;
+    emailLabel: string;
+    reviewLabel: string;
+    namePlaceholder: string;
+    emailPlaceholder: string;
+    reviewPlaceholder: string;
+    submitLabel: string;
+    submittingLabel: string;
+}
+export interface ReviewComposerProps {
+    labels?: Partial<ReviewComposerLabels>;
+    /** Host-owned pending state. The composer never guesses it. */
+    isSubmitting?: boolean;
+    /** Host-reported failure. Its presence keeps every entered value. */
+    error?: string;
+    /**
+     * Host-controlled reset. Advancing it clears the fields, which the host does
+     * only after a successful submission; leaving it unchanged preserves input.
+     */
+    resetSignal?: number;
+    /** Reports one submission. The host owns paging, moderation, and retries. */
+    onSubmit: (data: ReviewComposerData) => void;
+    className?: string;
+}
+export declare const defaultReviewComposerLabels: ReviewComposerLabels;
+/**
+ * The canonical review composer.
+ *
+ * It is a form cell: it owns the draft (so a failed submission keeps its input)
+ * and reports one submission. Pending and error are host state, never local
+ * guesses, and the rating is one native radio group so keyboard users select a
+ * value instead of toggling five buttons. Field ids come from `useId`, so two
+ * composers on one page never collide.
+ */
+export declare function ReviewComposer({ labels, isSubmitting, error, resetSignal, onSubmit, className, }: ReviewComposerProps): import("react").JSX.Element;
+export default ReviewComposer;
+//# sourceMappingURL=review-composer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"review-composer.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/reviews/review-composer.tsx"],"names":[],"mappings":"AAWA,yDAAyD;AACzD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;CACf;AAED,uEAAuE;AACvE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,gBAAgB,EAAE,MAAM,CAAA;IACxB,iBAAiB,EAAE,MAAM,CAAA;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAA;IACtC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,2BAA2B,EAAE,oBAazC,CAAA;AASD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,YAAoB,EACpB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,+BAqHrB;AAED,eAAe,cAAc,CAAA"}

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

@@ -0,0 +1,180 @@
+"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_composer_exports = {};
+__export(review_composer_exports, {
+  ReviewComposer: () => ReviewComposer,
+  default: () => review_composer_default,
+  defaultReviewComposerLabels: () => defaultReviewComposerLabels
+});
+module.exports = __toCommonJS(review_composer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_utils = require("../../../lib/utils.js");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_input = require("../../../ui/input.js");
+var import_label = require("../../../ui/label.js");
+var import_textarea = require("../../../ui/textarea.js");
+const defaultReviewComposerLabels = {
+  title: "Escribe una rese\xF1a",
+  description: "",
+  ratingLabel: "Tu valoraci\xF3n",
+  starLabel: "{n} de 5 estrellas",
+  nameLabel: "Nombre",
+  emailLabel: "Correo electr\xF3nico",
+  reviewLabel: "Tu rese\xF1a",
+  namePlaceholder: "Tu nombre",
+  emailPlaceholder: "tu@correo.com",
+  reviewPlaceholder: "Cu\xE9ntanos tu experiencia",
+  submitLabel: "Enviar rese\xF1a",
+  submittingLabel: "Enviando\u2026"
+};
+const interpolate = (template, values) => template.replace(
+  /\{(\w+)\}/g,
+  (match, key) => key in values ? String(values[key]) : match
+);
+const RATING_VALUES = [1, 2, 3, 4, 5];
+function ReviewComposer({
+  labels,
+  isSubmitting = false,
+  error,
+  resetSignal,
+  onSubmit,
+  className
+}) {
+  const copy = { ...defaultReviewComposerLabels, ...labels };
+  const uid = (0, import_react.useId)();
+  const [name, setName] = (0, import_react.useState)("");
+  const [email, setEmail] = (0, import_react.useState)("");
+  const [content, setContent] = (0, import_react.useState)("");
+  const [rating, setRating] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    setName("");
+    setEmail("");
+    setContent("");
+    setRating(0);
+  }, [resetSignal]);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (isSubmitting) return;
+    onSubmit({ name, email, content, rating });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { className: (0, import_utils.cn)("w-full", className), "data-slot": "review-composer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardHeader, { className: "gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-semibold", children: copy.title }),
+      copy.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: copy.description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, noValidate: false, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { className: "text-sm font-medium", children: copy.ratingLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-1", children: RATING_VALUES.map((value) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "radio",
+              id: `${uid}-rating-${value}`,
+              name: `${uid}-rating`,
+              value,
+              checked: rating === value,
+              className: "peer sr-only",
+              "aria-label": interpolate(copy.starLabel, { n: value }),
+              onChange: () => setRating(value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_label.Label,
+            {
+              htmlFor: `${uid}-rating-${value}`,
+              className: "flex size-9 cursor-pointer items-center justify-center rounded-md hover:bg-muted peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_lucide_react.Star,
+                {
+                  "aria-hidden": "true",
+                  className: (0, import_utils.cn)(
+                    "size-5",
+                    value <= rating ? "fill-current text-foreground" : "text-muted-foreground"
+                  )
+                }
+              )
+            }
+          )
+        ] }, value)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { htmlFor: `${uid}-name`, children: copy.nameLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input.Input,
+            {
+              id: `${uid}-name`,
+              name: "name",
+              autoComplete: "name",
+              required: true,
+              value: name,
+              placeholder: copy.namePlaceholder,
+              onChange: (event) => setName(event.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { htmlFor: `${uid}-email`, children: copy.emailLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input.Input,
+            {
+              id: `${uid}-email`,
+              name: "email",
+              type: "email",
+              autoComplete: "email",
+              required: true,
+              value: email,
+              placeholder: copy.emailPlaceholder,
+              onChange: (event) => setEmail(event.target.value)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { htmlFor: `${uid}-review`, children: copy.reviewLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_textarea.Textarea,
+          {
+            id: `${uid}-review`,
+            name: "review",
+            required: true,
+            rows: 4,
+            value: content,
+            placeholder: copy.reviewPlaceholder,
+            onChange: (event) => setContent(event.target.value)
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: "text-destructive text-sm", "data-slot": "review-composer-error", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "submit", disabled: isSubmitting, className: "self-start", children: isSubmitting ? copy.submittingLabel : copy.submitLabel })
+    ] }) })
+  ] });
+}
+var review_composer_default = ReviewComposer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReviewComposer,
+  defaultReviewComposerLabels
+});
+//# sourceMappingURL=review-composer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/reviews/review-composer.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useState, type FormEvent } from 'react'\nimport { Star } from 'lucide-react'\nimport { cn } from '../../../lib/utils'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardHeader } from '../../../ui/card'\nimport { Input } from '../../../ui/input'\nimport { Label } from '../../../ui/label'\nimport { Textarea } from '../../../ui/textarea'\n\n/** The value the composer reports for one submission. */\nexport interface ReviewComposerData {\n  name: string\n  email: string\n  content: string\n  rating: number\n}\n\n/** Every user-facing string the composer owns. All are overridable. */\nexport interface ReviewComposerLabels {\n  title: string\n  description: string\n  ratingLabel: string\n  starLabel: string\n  nameLabel: string\n  emailLabel: string\n  reviewLabel: string\n  namePlaceholder: string\n  emailPlaceholder: string\n  reviewPlaceholder: string\n  submitLabel: string\n  submittingLabel: string\n}\n\nexport interface ReviewComposerProps {\n  labels?: Partial<ReviewComposerLabels>\n  /** Host-owned pending state. The composer never guesses it. */\n  isSubmitting?: boolean\n  /** Host-reported failure. Its presence keeps every entered value. */\n  error?: string\n  /**\n   * Host-controlled reset. Advancing it clears the fields, which the host does\n   * only after a successful submission; leaving it unchanged preserves input.\n   */\n  resetSignal?: number\n  /** Reports one submission. The host owns paging, moderation, and retries. */\n  onSubmit: (data: ReviewComposerData) => void\n  className?: string\n}\n\nexport const defaultReviewComposerLabels: ReviewComposerLabels = {\n  title: 'Escribe una reseña',\n  description: '',\n  ratingLabel: 'Tu valoración',\n  starLabel: '{n} de 5 estrellas',\n  nameLabel: 'Nombre',\n  emailLabel: 'Correo electrónico',\n  reviewLabel: 'Tu reseña',\n  namePlaceholder: 'Tu nombre',\n  emailPlaceholder: 'tu@correo.com',\n  reviewPlaceholder: 'Cuéntanos tu experiencia',\n  submitLabel: 'Enviar reseña',\n  submittingLabel: 'Enviando…',\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\nconst RATING_VALUES = [1, 2, 3, 4, 5] as const\n\n/**\n * The canonical review composer.\n *\n * It is a form cell: it owns the draft (so a failed submission keeps its input)\n * and reports one submission. Pending and error are host state, never local\n * guesses, and the rating is one native radio group so keyboard users select a\n * value instead of toggling five buttons. Field ids come from `useId`, so two\n * composers on one page never collide.\n */\nexport function ReviewComposer({\n  labels,\n  isSubmitting = false,\n  error,\n  resetSignal,\n  onSubmit,\n  className,\n}: ReviewComposerProps) {\n  const copy: ReviewComposerLabels = { ...defaultReviewComposerLabels, ...labels }\n  const uid = useId()\n  const [name, setName] = useState('')\n  const [email, setEmail] = useState('')\n  const [content, setContent] = useState('')\n  const [rating, setRating] = useState(0)\n\n  useEffect(() => {\n    setName('')\n    setEmail('')\n    setContent('')\n    setRating(0)\n  }, [resetSignal])\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    if (isSubmitting) return\n    onSubmit({ name, email, content, rating })\n  }\n\n  return (\n    <Card className={cn('w-full', className)} data-slot='review-composer'>\n      <CardHeader className='gap-1'>\n        <h2 className='text-lg font-semibold'>{copy.title}</h2>\n        {copy.description ? (\n          <p className='text-muted-foreground text-sm'>{copy.description}</p>\n        ) : null}\n      </CardHeader>\n      <CardContent>\n        <form className='flex flex-col gap-4' onSubmit={handleSubmit} noValidate={false}>\n          <fieldset className='flex flex-col gap-2'>\n            <legend className='text-sm font-medium'>{copy.ratingLabel}</legend>\n            <div className='flex items-center gap-1'>\n              {RATING_VALUES.map((value) => (\n                <div key={value} className='relative'>\n                  <input\n                    type='radio'\n                    id={`${uid}-rating-${value}`}\n                    name={`${uid}-rating`}\n                    value={value}\n                    checked={rating === value}\n                    className='peer sr-only'\n                    aria-label={interpolate(copy.starLabel, { n: value })}\n                    onChange={() => setRating(value)}\n                  />\n                  <Label\n                    htmlFor={`${uid}-rating-${value}`}\n                    className='flex size-9 cursor-pointer items-center justify-center rounded-md hover:bg-muted peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2'\n                  >\n                    <Star\n                      aria-hidden='true'\n                      className={cn(\n                        'size-5',\n                        value <= rating ? 'fill-current text-foreground' : 'text-muted-foreground',\n                      )}\n                    />\n                  </Label>\n                </div>\n              ))}\n            </div>\n          </fieldset>\n\n          <div className='grid gap-4 sm:grid-cols-2'>\n            <div className='flex flex-col gap-2'>\n              <Label htmlFor={`${uid}-name`}>{copy.nameLabel}</Label>\n              <Input\n                id={`${uid}-name`}\n                name='name'\n                autoComplete='name'\n                required\n                value={name}\n                placeholder={copy.namePlaceholder}\n                onChange={(event) => setName(event.target.value)}\n              />\n            </div>\n            <div className='flex flex-col gap-2'>\n              <Label htmlFor={`${uid}-email`}>{copy.emailLabel}</Label>\n              <Input\n                id={`${uid}-email`}\n                name='email'\n                type='email'\n                autoComplete='email'\n                required\n                value={email}\n                placeholder={copy.emailPlaceholder}\n                onChange={(event) => setEmail(event.target.value)}\n              />\n            </div>\n          </div>\n\n          <div className='flex flex-col gap-2'>\n            <Label htmlFor={`${uid}-review`}>{copy.reviewLabel}</Label>\n            <Textarea\n              id={`${uid}-review`}\n              name='review'\n              required\n              rows={4}\n              value={content}\n              placeholder={copy.reviewPlaceholder}\n              onChange={(event) => setContent(event.target.value)}\n            />\n          </div>\n\n          {error ? (\n            <p role='alert' className='text-destructive text-sm' data-slot='review-composer-error'>\n              {error}\n            </p>\n          ) : null}\n\n          <Button type='submit' disabled={isSubmitting} className='self-start'>\n            {isSubmitting ? copy.submittingLabel : copy.submitLabel}\n          </Button>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default ReviewComposer\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { Star } from "lucide-react";
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Card, CardContent, CardHeader } from "../../../ui/card.mjs";
+import { Input } from "../../../ui/input.mjs";
+import { Label } from "../../../ui/label.mjs";
+import { Textarea } from "../../../ui/textarea.mjs";
+const defaultReviewComposerLabels = {
+  title: "Escribe una rese\xF1a",
+  description: "",
+  ratingLabel: "Tu valoraci\xF3n",
+  starLabel: "{n} de 5 estrellas",
+  nameLabel: "Nombre",
+  emailLabel: "Correo electr\xF3nico",
+  reviewLabel: "Tu rese\xF1a",
+  namePlaceholder: "Tu nombre",
+  emailPlaceholder: "tu@correo.com",
+  reviewPlaceholder: "Cu\xE9ntanos tu experiencia",
+  submitLabel: "Enviar rese\xF1a",
+  submittingLabel: "Enviando\u2026"
+};
+const interpolate = (template, values) => template.replace(
+  /\{(\w+)\}/g,
+  (match, key) => key in values ? String(values[key]) : match
+);
+const RATING_VALUES = [1, 2, 3, 4, 5];
+function ReviewComposer({
+  labels,
+  isSubmitting = false,
+  error,
+  resetSignal,
+  onSubmit,
+  className
+}) {
+  const copy = { ...defaultReviewComposerLabels, ...labels };
+  const uid = useId();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [content, setContent] = useState("");
+  const [rating, setRating] = useState(0);
+  useEffect(() => {
+    setName("");
+    setEmail("");
+    setContent("");
+    setRating(0);
+  }, [resetSignal]);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (isSubmitting) return;
+    onSubmit({ name, email, content, rating });
+  };
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), "data-slot": "review-composer", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-1", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: copy.title }),
+      copy.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: copy.description }) : null
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, noValidate: false, children: [
+      /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium", children: copy.ratingLabel }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: RATING_VALUES.map((value) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              id: `${uid}-rating-${value}`,
+              name: `${uid}-rating`,
+              value,
+              checked: rating === value,
+              className: "peer sr-only",
+              "aria-label": interpolate(copy.starLabel, { n: value }),
+              onChange: () => setRating(value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              htmlFor: `${uid}-rating-${value}`,
+              className: "flex size-9 cursor-pointer items-center justify-center rounded-md hover:bg-muted peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
+              children: /* @__PURE__ */ jsx(
+                Star,
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "size-5",
+                    value <= rating ? "fill-current text-foreground" : "text-muted-foreground"
+                  )
+                }
+              )
+            }
+          )
+        ] }, value)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: `${uid}-name`, children: copy.nameLabel }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: `${uid}-name`,
+              name: "name",
+              autoComplete: "name",
+              required: true,
+              value: name,
+              placeholder: copy.namePlaceholder,
+              onChange: (event) => setName(event.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: `${uid}-email`, children: copy.emailLabel }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: `${uid}-email`,
+              name: "email",
+              type: "email",
+              autoComplete: "email",
+              required: true,
+              value: email,
+              placeholder: copy.emailPlaceholder,
+              onChange: (event) => setEmail(event.target.value)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${uid}-review`, children: copy.reviewLabel }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: `${uid}-review`,
+            name: "review",
+            required: true,
+            rows: 4,
+            value: content,
+            placeholder: copy.reviewPlaceholder,
+            onChange: (event) => setContent(event.target.value)
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive text-sm", "data-slot": "review-composer-error", children: error }) : null,
+      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting, className: "self-start", children: isSubmitting ? copy.submittingLabel : copy.submitLabel })
+    ] }) })
+  ] });
+}
+var review_composer_default = ReviewComposer;
+export {
+  ReviewComposer,
+  review_composer_default as default,
+  defaultReviewComposerLabels
+};
+//# sourceMappingURL=review-composer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/reviews/review-composer.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useState, type FormEvent } from 'react'\nimport { Star } from 'lucide-react'\nimport { cn } from '../../../lib/utils'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardHeader } from '../../../ui/card'\nimport { Input } from '../../../ui/input'\nimport { Label } from '../../../ui/label'\nimport { Textarea } from '../../../ui/textarea'\n\n/** The value the composer reports for one submission. */\nexport interface ReviewComposerData {\n  name: string\n  email: string\n  content: string\n  rating: number\n}\n\n/** Every user-facing string the composer owns. All are overridable. */\nexport interface ReviewComposerLabels {\n  title: string\n  description: string\n  ratingLabel: string\n  starLabel: string\n  nameLabel: string\n  emailLabel: string\n  reviewLabel: string\n  namePlaceholder: string\n  emailPlaceholder: string\n  reviewPlaceholder: string\n  submitLabel: string\n  submittingLabel: string\n}\n\nexport interface ReviewComposerProps {\n  labels?: Partial<ReviewComposerLabels>\n  /** Host-owned pending state. The composer never guesses it. */\n  isSubmitting?: boolean\n  /** Host-reported failure. Its presence keeps every entered value. */\n  error?: string\n  /**\n   * Host-controlled reset. Advancing it clears the fields, which the host does\n   * only after a successful submission; leaving it unchanged preserves input.\n   */\n  resetSignal?: number\n  /** Reports one submission. The host owns paging, moderation, and retries. */\n  onSubmit: (data: ReviewComposerData) => void\n  className?: string\n}\n\nexport const defaultReviewComposerLabels: ReviewComposerLabels = {\n  title: 'Escribe una reseña',\n  description: '',\n  ratingLabel: 'Tu valoración',\n  starLabel: '{n} de 5 estrellas',\n  nameLabel: 'Nombre',\n  emailLabel: 'Correo electrónico',\n  reviewLabel: 'Tu reseña',\n  namePlaceholder: 'Tu nombre',\n  emailPlaceholder: 'tu@correo.com',\n  reviewPlaceholder: 'Cuéntanos tu experiencia',\n  submitLabel: 'Enviar reseña',\n  submittingLabel: 'Enviando…',\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\nconst RATING_VALUES = [1, 2, 3, 4, 5] as const\n\n/**\n * The canonical review composer.\n *\n * It is a form cell: it owns the draft (so a failed submission keeps its input)\n * and reports one submission. Pending and error are host state, never local\n * guesses, and the rating is one native radio group so keyboard users select a\n * value instead of toggling five buttons. Field ids come from `useId`, so two\n * composers on one page never collide.\n */\nexport function ReviewComposer({\n  labels,\n  isSubmitting = false,\n  error,\n  resetSignal,\n  onSubmit,\n  className,\n}: ReviewComposerProps) {\n  const copy: ReviewComposerLabels = { ...defaultReviewComposerLabels, ...labels }\n  const uid = useId()\n  const [name, setName] = useState('')\n  const [email, setEmail] = useState('')\n  const [content, setContent] = useState('')\n  const [rating, setRating] = useState(0)\n\n  useEffect(() => {\n    setName('')\n    setEmail('')\n    setContent('')\n    setRating(0)\n  }, [resetSignal])\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    if (isSubmitting) return\n    onSubmit({ name, email, content, rating })\n  }\n\n  return (\n    <Card className={cn('w-full', className)} data-slot='review-composer'>\n      <CardHeader className='gap-1'>\n        <h2 className='text-lg font-semibold'>{copy.title}</h2>\n        {copy.description ? (\n          <p className='text-muted-foreground text-sm'>{copy.description}</p>\n        ) : null}\n      </CardHeader>\n      <CardContent>\n        <form className='flex flex-col gap-4' onSubmit={handleSubmit} noValidate={false}>\n          <fieldset className='flex flex-col gap-2'>\n            <legend className='text-sm font-medium'>{copy.ratingLabel}</legend>\n            <div className='flex items-center gap-1'>\n              {RATING_VALUES.map((value) => (\n                <div key={value} className='relative'>\n                  <input\n                    type='radio'\n                    id={`${uid}-rating-${value}`}\n                    name={`${uid}-rating`}\n                    value={value}\n                    checked={rating === value}\n                    className='peer sr-only'\n                    aria-label={interpolate(copy.starLabel, { n: value })}\n                    onChange={() => setRating(value)}\n                  />\n                  <Label\n                    htmlFor={`${uid}-rating-${value}`}\n                    className='flex size-9 cursor-pointer items-center justify-center rounded-md hover:bg-muted peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2'\n                  >\n                    <Star\n                      aria-hidden='true'\n                      className={cn(\n                        'size-5',\n                        value <= rating ? 'fill-current text-foreground' : 'text-muted-foreground',\n                      )}\n                    />\n                  </Label>\n                </div>\n              ))}\n            </div>\n          </fieldset>\n\n          <div className='grid gap-4 sm:grid-cols-2'>\n            <div className='flex flex-col gap-2'>\n              <Label htmlFor={`${uid}-name`}>{copy.nameLabel}</Label>\n              <Input\n                id={`${uid}-name`}\n                name='name'\n                autoComplete='name'\n                required\n                value={name}\n                placeholder={copy.namePlaceholder}\n                onChange={(event) => setName(event.target.value)}\n              />\n            </div>\n            <div className='flex flex-col gap-2'>\n              <Label htmlFor={`${uid}-email`}>{copy.emailLabel}</Label>\n              <Input\n                id={`${uid}-email`}\n                name='email'\n                type='email'\n                autoComplete='email'\n                required\n                value={email}\n                placeholder={copy.emailPlaceholder}\n                onChange={(event) => setEmail(event.target.value)}\n              />\n            </div>\n          </div>\n\n          <div className='flex flex-col gap-2'>\n            <Label htmlFor={`${uid}-review`}>{copy.reviewLabel}</Label>\n            <Textarea\n              id={`${uid}-review`}\n              name='review'\n              required\n              rows={4}\n              value={content}\n              placeholder={copy.reviewPlaceholder}\n              onChange={(event) => setContent(event.target.value)}\n            />\n          </div>\n\n          {error ? (\n            <p role='alert' className='text-destructive text-sm' data-slot='review-composer-error'>\n              {error}\n            </p>\n          ) : null}\n\n          <Button type='submit' disabled={isSubmitting} className='self-start'>\n            {isSubmitting ? copy.submittingLabel : copy.submitLabel}\n          </Button>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default ReviewComposer\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,40 @@
+import { type ReviewCardLabels, type ReviewItemData } from './review-card';
+/** The two bounded structures the collection can render. */
+export type ReviewListPresentation = 'list' | 'carousel';
+/** Every user-facing string the collection owns. Cell copy lives in `ReviewCard`. */
+export interface ReviewListLabels {
+    title: string;
+    description: string;
+    emptyLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+    slideLabel: string;
+}
+export interface ReviewListProps {
+    /** Exactly the reviews to render: the host owns pagination and slicing. */
+    reviews: ReviewItemData[];
+    /**
+     * Bounded structure switch. `list` (default) renders a responsive grid;
+     * `carousel` renders the same cells in a scrollable carousel. Both accept the
+     * same data and report the same actions. Responsiveness is CSS only.
+     */
+    presentation?: ReviewListPresentation;
+    labels?: Partial<ReviewListLabels>;
+    cardLabels?: Partial<ReviewCardLabels>;
+    /** Renders the like control on every cell; receives the backend review id. */
+    onToggleLike?: (id: string, liked: boolean) => void;
+    /** Renders the comment control on every cell; receives the backend review id. */
+    onComment?: (id: string) => void;
+    className?: string;
+}
+export declare const defaultReviewListLabels: ReviewListLabels;
+/**
+ * The canonical review collection section.
+ *
+ * It renders exactly the reviews it is given: pagination, ordering, loading and
+ * error states belong to the host. The block slices no array, keeps no
+ * engagement state, and measures no viewport.
+ */
+export declare function ReviewList({ reviews, presentation, labels, cardLabels, onToggleLike, onComment, className, }: ReviewListProps): import("react").JSX.Element;
+export default ReviewList;
+//# sourceMappingURL=review-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"review-list.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/reviews/review-list.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAA;AAEtF,4DAA4D;AAC5D,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,UAAU,CAAA;AAExD,qFAAqF;AACrF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,sBAAsB,CAAA;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IACtC,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACnD,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,uBAAuB,EAAE,gBAOrC,CAAA;AAOD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,YAAqB,EACrB,MAAM,EACN,UAAU,EACV,YAAY,EACZ,SAAS,EACT,SAAS,GACV,EAAE,eAAe,+BAiGjB;AAED,eAAe,UAAU,CAAA"}