@thorprovider/blocks 2.0.0 → 3.0.0

package/dist/blocks/marketing/testimonials/testimonial-section.js

@@ -0,0 +1,173 @@
+"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 testimonial_section_exports = {};
+__export(testimonial_section_exports, {
+  TestimonialSection: () => TestimonialSection,
+  default: () => testimonial_section_default
+});
+module.exports = __toCommonJS(testimonial_section_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_avatar = require("../../../ui/avatar.js");
+var import_card = require("../../../ui/card.js");
+var import_carousel = require("../../../ui/carousel.js");
+const bentoGridClasses = [
+  "grid grid-rows-[auto_1fr] gap-8 ring-1 ring-foreground/10 sm:p-6 md:col-span-2 lg:col-span-2 lg:row-span-2 shadow-sm",
+  "ring-1 ring-foreground/10 md:col-span-2 lg:col-span-2 py-6 shadow-sm",
+  "pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm",
+  "pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm"
+];
+const contentClasses = ["", "h-full px-6", "h-full pt-6 px-6", "h-full pt-6 px-6"];
+const textClasses = ["text-xl text-balance", "text-base text-balance", "text-base text-balance", "text-base text-balance"];
+function initials(name) {
+  return name.split(" ").map((part) => part[0]).join("");
+}
+function Rating({ value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", "aria-label": `${value} out of 5 stars`, children: [
+    Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_lucide_react.Star,
+      {
+        "aria-hidden": "true",
+        className: (0, import_utils.cn)("size-4", index < Math.floor(value) ? "fill-foreground" : "fill-none")
+      },
+      index
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground ms-2 text-sm", children: value })
+  ] });
+}
+function TestimonialAttribution({ item }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-[auto_1fr] items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_avatar.Avatar, { className: "bg-muted size-12", children: [
+      item.avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.AvatarImage, { src: item.avatar || void 0, alt: item.name, loading: "lazy" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.AvatarFallback, { children: initials(item.name) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("cite", { className: "text-sm font-medium not-italic", children: item.name }),
+      item.role && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground block text-sm", children: item.role })
+    ] })
+  ] });
+}
+function BentoPresentation({
+  items,
+  title,
+  description,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: (0, import_utils.cn)("py-12 md:py-16", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 sm:px-6 md:gap-16 lg:px-8", children: [
+    (title || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "relative z-10 mx-auto flex w-full max-w-4xl flex-col gap-6 text-center md:gap-12", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-4xl font-medium max-lg:text-balance lg:text-5xl", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mx-auto max-w-2xl max-lg:text-balance", children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2", children: items.map((item, index) => {
+      const tileIndex = index % bentoGridClasses.length;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { className: bentoGridClasses[tileIndex], children: [
+        tileIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardHeader, { className: "pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Quote, { className: "text-muted-foreground/30 size-16 rotate-180", "aria-hidden": "true" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { className: contentClasses[tileIndex], children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("blockquote", { className: "grid h-full grid-rows-[1fr_auto] gap-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: textClasses[tileIndex], children: item.content }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TestimonialAttribution, { item }),
+          item.rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Rating, { value: item.rating })
+        ] }) })
+      ] }, item.id);
+    }) })
+  ] }) });
+}
+function CarouselPresentation({
+  items,
+  title,
+  description,
+  className,
+  carouselLabels
+}) {
+  const [carouselApi, setCarouselApi] = (0, import_react.useState)();
+  const [selectedSlide, setSelectedSlide] = (0, import_react.useState)(0);
+  const [pageCount, setPageCount] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (!carouselApi) return;
+    const updateCarouselState = () => {
+      setSelectedSlide(carouselApi.selectedScrollSnap());
+      setPageCount(carouselApi.scrollSnapList().length);
+    };
+    updateCarouselState();
+    carouselApi.on("select", updateCarouselState);
+    carouselApi.on("reInit", updateCarouselState);
+    return () => {
+      carouselApi.off("select", updateCarouselState);
+      carouselApi.off("reInit", updateCarouselState);
+    };
+  }, [carouselApi]);
+  const canNavigate = pageCount > 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: (0, import_utils.cn)("py-12 lg:py-20", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    (title || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "mb-12 text-center md:mb-16", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-3xl font-bold text-balance md:text-4xl", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mx-auto mt-4 max-w-2xl", children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_carousel.Carousel,
+      {
+        className: "w-full",
+        opts: { align: "start", loop: true },
+        setApi: setCarouselApi,
+        "aria-label": title,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselContent, { className: "-ml-1", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselItem, { className: "basis-full px-4 last:pe-0 sm:basis-1/2 lg:basis-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { className: "h-full overflow-hidden border border-border py-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardHeader, { className: "gap-0 px-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TestimonialAttribution, { item }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "px-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { className: "text-muted-foreground text-base", children: item.content }),
+              item.rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Rating, { value: item.rating })
+            ] })
+          ] }) }, item.id)) }),
+          canNavigate && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselPrevious, { className: "cursor-pointer", "aria-label": carouselLabels.previous }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselNext, { className: "cursor-pointer", "aria-label": carouselLabels.next })
+          ] })
+        ]
+      }
+    ),
+    canNavigate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-6 flex justify-center gap-2", children: Array.from({ length: pageCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_utils.cn)(
+          "size-2 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          selectedSlide === index ? "bg-foreground" : "bg-muted-foreground/40"
+        ),
+        "aria-label": carouselLabels.slide.replace("{n}", String(index + 1)),
+        "aria-current": selectedSlide === index ? "true" : void 0,
+        onClick: () => carouselApi?.scrollTo(index)
+      },
+      index
+    )) })
+  ] }) });
+}
+function TestimonialSection(props) {
+  if (props.items.length === 0) return null;
+  if (props.presentation === "carousel") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CarouselPresentation, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BentoPresentation, { ...props });
+}
+var testimonial_section_default = TestimonialSection;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TestimonialSection
+});
+//# sourceMappingURL=testimonial-section.js.map

package/dist/blocks/marketing/testimonials/testimonial-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/marketing/testimonials/testimonial-section.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Quote, Star } from 'lucide-react'\nimport { cn } from '../../../lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'\nimport { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'\nimport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from '../../../ui/carousel'\n\nexport interface TestimonialItem {\n  id: string\n  name: string\n  content: string\n  role?: string\n  avatar?: string\n  rating?: number\n}\n\nexport interface TestimonialCarouselLabels {\n  previous: string\n  next: string\n  slide: string\n}\n\ninterface TestimonialSectionBaseProps {\n  items: TestimonialItem[]\n  title?: string\n  description?: string\n  className?: string\n}\n\nexport type TestimonialSectionProps = TestimonialSectionBaseProps &\n  (\n    | {\n        presentation: 'carousel'\n        carouselLabels: TestimonialCarouselLabels\n      }\n    | {\n        presentation: 'bento'\n        carouselLabels?: never\n      }\n  )\n\nconst bentoGridClasses = [\n  'grid grid-rows-[auto_1fr] gap-8 ring-1 ring-foreground/10 sm:p-6 md:col-span-2 lg:col-span-2 lg:row-span-2 shadow-sm',\n  'ring-1 ring-foreground/10 md:col-span-2 lg:col-span-2 py-6 shadow-sm',\n  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',\n  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',\n]\n\nconst contentClasses = ['', 'h-full px-6', 'h-full pt-6 px-6', 'h-full pt-6 px-6']\nconst textClasses = ['text-xl text-balance', 'text-base text-balance', 'text-base text-balance', 'text-base text-balance']\n\nfunction initials(name: string) {\n  return name\n    .split(' ')\n    .map(part => part[0])\n    .join('')\n}\n\nfunction Rating({ value }: { value: number }) {\n  return (\n    <div className='flex items-center gap-1' aria-label={`${value} out of 5 stars`}>\n      {Array.from({ length: 5 }, (_, index) => (\n        <Star\n          key={index}\n          aria-hidden='true'\n          className={cn('size-4', index < Math.floor(value) ? 'fill-foreground' : 'fill-none')}\n        />\n      ))}\n      <span className='text-muted-foreground ms-2 text-sm'>{value}</span>\n    </div>\n  )\n}\n\nfunction TestimonialAttribution({ item }: { item: TestimonialItem }) {\n  return (\n    <div className='grid grid-cols-[auto_1fr] items-center gap-3'>\n      <Avatar className='bg-muted size-12'>\n        {item.avatar && <AvatarImage src={item.avatar || undefined} alt={item.name} loading='lazy' />}\n        <AvatarFallback>{initials(item.name)}</AvatarFallback>\n      </Avatar>\n      <div>\n        <cite className='text-sm font-medium not-italic'>{item.name}</cite>\n        {item.role && <span className='text-muted-foreground block text-sm'>{item.role}</span>}\n      </div>\n    </div>\n  )\n}\n\nfunction BentoPresentation({\n  items,\n  title,\n  description,\n  className,\n}: TestimonialSectionBaseProps) {\n  return (\n    <section className={cn('py-12 md:py-16', className)}>\n      <div className='mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 sm:px-6 md:gap-16 lg:px-8'>\n        {(title || description) && (\n          <header className='relative z-10 mx-auto flex w-full max-w-4xl flex-col gap-6 text-center md:gap-12'>\n            {title && <h2 className='text-4xl font-medium max-lg:text-balance lg:text-5xl'>{title}</h2>}\n            {description && (\n              <p className='text-muted-foreground mx-auto max-w-2xl max-lg:text-balance'>\n                {description}\n              </p>\n            )}\n          </header>\n        )}\n\n        <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2'>\n          {items.map((item, index) => {\n            const tileIndex = index % bentoGridClasses.length\n\n            return (\n              <Card key={item.id} className={bentoGridClasses[tileIndex]}>\n                {tileIndex === 0 && (\n                  <CardHeader className='pb-6'>\n                    <div className='flex items-center justify-start'>\n                      <Quote className='text-muted-foreground/30 size-16 rotate-180' aria-hidden='true' />\n                    </div>\n                  </CardHeader>\n                )}\n                <CardContent className={contentClasses[tileIndex]}>\n                  <blockquote className='grid h-full grid-rows-[1fr_auto] gap-6'>\n                    <p className={textClasses[tileIndex]}>{item.content}</p>\n                    <TestimonialAttribution item={item} />\n                    {item.rating !== undefined && <Rating value={item.rating} />}\n                  </blockquote>\n                </CardContent>\n              </Card>\n            )\n          })}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nfunction CarouselPresentation({\n  items,\n  title,\n  description,\n  className,\n  carouselLabels,\n}: TestimonialSectionBaseProps & {\n  carouselLabels: TestimonialCarouselLabels\n}) {\n  const [carouselApi, setCarouselApi] = useState<CarouselApi>()\n  const [selectedSlide, setSelectedSlide] = useState(0)\n  const [pageCount, setPageCount] = useState(0)\n\n  useEffect(() => {\n    if (!carouselApi) return\n\n    // Controls are only useful when the collection spans more than one page.\n    // Embla owns the measurement: it reports a single snap when every slide fits.\n    const updateCarouselState = () => {\n      setSelectedSlide(carouselApi.selectedScrollSnap())\n      setPageCount(carouselApi.scrollSnapList().length)\n    }\n\n    updateCarouselState()\n    carouselApi.on('select', updateCarouselState)\n    carouselApi.on('reInit', updateCarouselState)\n\n    return () => {\n      carouselApi.off('select', updateCarouselState)\n      carouselApi.off('reInit', updateCarouselState)\n    }\n  }, [carouselApi])\n\n  const canNavigate = pageCount > 1\n\n  return (\n    <section className={cn('py-12 lg:py-20', className)}>\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {(title || description) && (\n          <header className='mb-12 text-center md:mb-16'>\n            {title && <h2 className='text-3xl font-bold text-balance md:text-4xl'>{title}</h2>}\n            {description && <p className='text-muted-foreground mx-auto mt-4 max-w-2xl'>{description}</p>}\n          </header>\n        )}\n\n        <Carousel\n          className='w-full'\n          opts={{ align: 'start', loop: true }}\n          setApi={setCarouselApi}\n          aria-label={title}\n        >\n          <CarouselContent className='-ml-1'>\n            {items.map(item => (\n              <CarouselItem key={item.id} className='basis-full px-4 last:pe-0 sm:basis-1/2 lg:basis-1/3'>\n                <Card className='h-full overflow-hidden border border-border py-6'>\n                  <CardHeader className='gap-0 px-6'>\n                    <TestimonialAttribution item={item} />\n                  </CardHeader>\n                  <CardContent className='px-6'>\n                    <blockquote className='text-muted-foreground text-base'>{item.content}</blockquote>\n                    {item.rating !== undefined && <Rating value={item.rating} />}\n                  </CardContent>\n                </Card>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n          {canNavigate && (\n            <>\n              <CarouselPrevious className='cursor-pointer' aria-label={carouselLabels.previous} />\n              <CarouselNext className='cursor-pointer' aria-label={carouselLabels.next} />\n            </>\n          )}\n        </Carousel>\n        {canNavigate && (\n          <div className='mt-6 flex justify-center gap-2'>\n            {Array.from({ length: pageCount }, (_, index) => (\n              <button\n                key={index}\n                type='button'\n                className={cn(\n                  'size-2 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n                  selectedSlide === index ? 'bg-foreground' : 'bg-muted-foreground/40',\n                )}\n                aria-label={carouselLabels.slide.replace('{n}', String(index + 1))}\n                aria-current={selectedSlide === index ? 'true' : undefined}\n                onClick={() => carouselApi?.scrollTo(index)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n\nexport function TestimonialSection(props: TestimonialSectionProps) {\n  if (props.items.length === 0) return null\n\n  if (props.presentation === 'carousel') {\n    return <CarouselPresentation {...props} />\n  }\n\n  return <BentoPresentation {...props} />\n}\n\nexport default TestimonialSection\n"],"mappings":"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","names":[]}

package/dist/blocks/marketing/testimonials/testimonial-section.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Quote, Star } from "lucide-react";
+import { cn } from "../../../lib/utils.mjs";
+import { Avatar, AvatarFallback, AvatarImage } from "../../../ui/avatar.mjs";
+import { Card, CardContent, CardHeader } from "../../../ui/card.mjs";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious
+} from "../../../ui/carousel.mjs";
+const bentoGridClasses = [
+  "grid grid-rows-[auto_1fr] gap-8 ring-1 ring-foreground/10 sm:p-6 md:col-span-2 lg:col-span-2 lg:row-span-2 shadow-sm",
+  "ring-1 ring-foreground/10 md:col-span-2 lg:col-span-2 py-6 shadow-sm",
+  "pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm",
+  "pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm"
+];
+const contentClasses = ["", "h-full px-6", "h-full pt-6 px-6", "h-full pt-6 px-6"];
+const textClasses = ["text-xl text-balance", "text-base text-balance", "text-base text-balance", "text-base text-balance"];
+function initials(name) {
+  return name.split(" ").map((part) => part[0]).join("");
+}
+function Rating({ value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", "aria-label": `${value} out of 5 stars`, children: [
+    Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx(
+      Star,
+      {
+        "aria-hidden": "true",
+        className: cn("size-4", index < Math.floor(value) ? "fill-foreground" : "fill-none")
+      },
+      index
+    )),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground ms-2 text-sm", children: value })
+  ] });
+}
+function TestimonialAttribution({ item }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] items-center gap-3", children: [
+    /* @__PURE__ */ jsxs(Avatar, { className: "bg-muted size-12", children: [
+      item.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: item.avatar || void 0, alt: item.name, loading: "lazy" }),
+      /* @__PURE__ */ jsx(AvatarFallback, { children: initials(item.name) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("cite", { className: "text-sm font-medium not-italic", children: item.name }),
+      item.role && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block text-sm", children: item.role })
+    ] })
+  ] });
+}
+function BentoPresentation({
+  items,
+  title,
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("py-12 md:py-16", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 sm:px-6 md:gap-16 lg:px-8", children: [
+    (title || description) && /* @__PURE__ */ jsxs("header", { className: "relative z-10 mx-auto flex w-full max-w-4xl flex-col gap-6 text-center md:gap-12", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-4xl font-medium max-lg:text-balance lg:text-5xl", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mx-auto max-w-2xl max-lg:text-balance", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2", children: items.map((item, index) => {
+      const tileIndex = index % bentoGridClasses.length;
+      return /* @__PURE__ */ jsxs(Card, { className: bentoGridClasses[tileIndex], children: [
+        tileIndex === 0 && /* @__PURE__ */ jsx(CardHeader, { className: "pb-6", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsx(Quote, { className: "text-muted-foreground/30 size-16 rotate-180", "aria-hidden": "true" }) }) }),
+        /* @__PURE__ */ jsx(CardContent, { className: contentClasses[tileIndex], children: /* @__PURE__ */ jsxs("blockquote", { className: "grid h-full grid-rows-[1fr_auto] gap-6", children: [
+          /* @__PURE__ */ jsx("p", { className: textClasses[tileIndex], children: item.content }),
+          /* @__PURE__ */ jsx(TestimonialAttribution, { item }),
+          item.rating !== void 0 && /* @__PURE__ */ jsx(Rating, { value: item.rating })
+        ] }) })
+      ] }, item.id);
+    }) })
+  ] }) });
+}
+function CarouselPresentation({
+  items,
+  title,
+  description,
+  className,
+  carouselLabels
+}) {
+  const [carouselApi, setCarouselApi] = useState();
+  const [selectedSlide, setSelectedSlide] = useState(0);
+  const [pageCount, setPageCount] = useState(0);
+  useEffect(() => {
+    if (!carouselApi) return;
+    const updateCarouselState = () => {
+      setSelectedSlide(carouselApi.selectedScrollSnap());
+      setPageCount(carouselApi.scrollSnapList().length);
+    };
+    updateCarouselState();
+    carouselApi.on("select", updateCarouselState);
+    carouselApi.on("reInit", updateCarouselState);
+    return () => {
+      carouselApi.off("select", updateCarouselState);
+      carouselApi.off("reInit", updateCarouselState);
+    };
+  }, [carouselApi]);
+  const canNavigate = pageCount > 1;
+  return /* @__PURE__ */ jsx("section", { className: cn("py-12 lg:py-20", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    (title || description) && /* @__PURE__ */ jsxs("header", { className: "mb-12 text-center md:mb-16", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold text-balance md:text-4xl", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mx-auto mt-4 max-w-2xl", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Carousel,
+      {
+        className: "w-full",
+        opts: { align: "start", loop: true },
+        setApi: setCarouselApi,
+        "aria-label": title,
+        children: [
+          /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-1", children: items.map((item) => /* @__PURE__ */ jsx(CarouselItem, { className: "basis-full px-4 last:pe-0 sm:basis-1/2 lg:basis-1/3", children: /* @__PURE__ */ jsxs(Card, { className: "h-full overflow-hidden border border-border py-6", children: [
+            /* @__PURE__ */ jsx(CardHeader, { className: "gap-0 px-6", children: /* @__PURE__ */ jsx(TestimonialAttribution, { item }) }),
+            /* @__PURE__ */ jsxs(CardContent, { className: "px-6", children: [
+              /* @__PURE__ */ jsx("blockquote", { className: "text-muted-foreground text-base", children: item.content }),
+              item.rating !== void 0 && /* @__PURE__ */ jsx(Rating, { value: item.rating })
+            ] })
+          ] }) }, item.id)) }),
+          canNavigate && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CarouselPrevious, { className: "cursor-pointer", "aria-label": carouselLabels.previous }),
+            /* @__PURE__ */ jsx(CarouselNext, { className: "cursor-pointer", "aria-label": carouselLabels.next })
+          ] })
+        ]
+      }
+    ),
+    canNavigate && /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-center gap-2", children: Array.from({ length: pageCount }, (_, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "size-2 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          selectedSlide === index ? "bg-foreground" : "bg-muted-foreground/40"
+        ),
+        "aria-label": carouselLabels.slide.replace("{n}", String(index + 1)),
+        "aria-current": selectedSlide === index ? "true" : void 0,
+        onClick: () => carouselApi?.scrollTo(index)
+      },
+      index
+    )) })
+  ] }) });
+}
+function TestimonialSection(props) {
+  if (props.items.length === 0) return null;
+  if (props.presentation === "carousel") {
+    return /* @__PURE__ */ jsx(CarouselPresentation, { ...props });
+  }
+  return /* @__PURE__ */ jsx(BentoPresentation, { ...props });
+}
+var testimonial_section_default = TestimonialSection;
+export {
+  TestimonialSection,
+  testimonial_section_default as default
+};
+//# sourceMappingURL=testimonial-section.mjs.map

package/dist/blocks/marketing/testimonials/testimonial-section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/marketing/testimonials/testimonial-section.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Quote, Star } from 'lucide-react'\nimport { cn } from '../../../lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'\nimport { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'\nimport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from '../../../ui/carousel'\n\nexport interface TestimonialItem {\n  id: string\n  name: string\n  content: string\n  role?: string\n  avatar?: string\n  rating?: number\n}\n\nexport interface TestimonialCarouselLabels {\n  previous: string\n  next: string\n  slide: string\n}\n\ninterface TestimonialSectionBaseProps {\n  items: TestimonialItem[]\n  title?: string\n  description?: string\n  className?: string\n}\n\nexport type TestimonialSectionProps = TestimonialSectionBaseProps &\n  (\n    | {\n        presentation: 'carousel'\n        carouselLabels: TestimonialCarouselLabels\n      }\n    | {\n        presentation: 'bento'\n        carouselLabels?: never\n      }\n  )\n\nconst bentoGridClasses = [\n  'grid grid-rows-[auto_1fr] gap-8 ring-1 ring-foreground/10 sm:p-6 md:col-span-2 lg:col-span-2 lg:row-span-2 shadow-sm',\n  'ring-1 ring-foreground/10 md:col-span-2 lg:col-span-2 py-6 shadow-sm',\n  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',\n  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',\n]\n\nconst contentClasses = ['', 'h-full px-6', 'h-full pt-6 px-6', 'h-full pt-6 px-6']\nconst textClasses = ['text-xl text-balance', 'text-base text-balance', 'text-base text-balance', 'text-base text-balance']\n\nfunction initials(name: string) {\n  return name\n    .split(' ')\n    .map(part => part[0])\n    .join('')\n}\n\nfunction Rating({ value }: { value: number }) {\n  return (\n    <div className='flex items-center gap-1' aria-label={`${value} out of 5 stars`}>\n      {Array.from({ length: 5 }, (_, index) => (\n        <Star\n          key={index}\n          aria-hidden='true'\n          className={cn('size-4', index < Math.floor(value) ? 'fill-foreground' : 'fill-none')}\n        />\n      ))}\n      <span className='text-muted-foreground ms-2 text-sm'>{value}</span>\n    </div>\n  )\n}\n\nfunction TestimonialAttribution({ item }: { item: TestimonialItem }) {\n  return (\n    <div className='grid grid-cols-[auto_1fr] items-center gap-3'>\n      <Avatar className='bg-muted size-12'>\n        {item.avatar && <AvatarImage src={item.avatar || undefined} alt={item.name} loading='lazy' />}\n        <AvatarFallback>{initials(item.name)}</AvatarFallback>\n      </Avatar>\n      <div>\n        <cite className='text-sm font-medium not-italic'>{item.name}</cite>\n        {item.role && <span className='text-muted-foreground block text-sm'>{item.role}</span>}\n      </div>\n    </div>\n  )\n}\n\nfunction BentoPresentation({\n  items,\n  title,\n  description,\n  className,\n}: TestimonialSectionBaseProps) {\n  return (\n    <section className={cn('py-12 md:py-16', className)}>\n      <div className='mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 sm:px-6 md:gap-16 lg:px-8'>\n        {(title || description) && (\n          <header className='relative z-10 mx-auto flex w-full max-w-4xl flex-col gap-6 text-center md:gap-12'>\n            {title && <h2 className='text-4xl font-medium max-lg:text-balance lg:text-5xl'>{title}</h2>}\n            {description && (\n              <p className='text-muted-foreground mx-auto max-w-2xl max-lg:text-balance'>\n                {description}\n              </p>\n            )}\n          </header>\n        )}\n\n        <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2'>\n          {items.map((item, index) => {\n            const tileIndex = index % bentoGridClasses.length\n\n            return (\n              <Card key={item.id} className={bentoGridClasses[tileIndex]}>\n                {tileIndex === 0 && (\n                  <CardHeader className='pb-6'>\n                    <div className='flex items-center justify-start'>\n                      <Quote className='text-muted-foreground/30 size-16 rotate-180' aria-hidden='true' />\n                    </div>\n                  </CardHeader>\n                )}\n                <CardContent className={contentClasses[tileIndex]}>\n                  <blockquote className='grid h-full grid-rows-[1fr_auto] gap-6'>\n                    <p className={textClasses[tileIndex]}>{item.content}</p>\n                    <TestimonialAttribution item={item} />\n                    {item.rating !== undefined && <Rating value={item.rating} />}\n                  </blockquote>\n                </CardContent>\n              </Card>\n            )\n          })}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nfunction CarouselPresentation({\n  items,\n  title,\n  description,\n  className,\n  carouselLabels,\n}: TestimonialSectionBaseProps & {\n  carouselLabels: TestimonialCarouselLabels\n}) {\n  const [carouselApi, setCarouselApi] = useState<CarouselApi>()\n  const [selectedSlide, setSelectedSlide] = useState(0)\n  const [pageCount, setPageCount] = useState(0)\n\n  useEffect(() => {\n    if (!carouselApi) return\n\n    // Controls are only useful when the collection spans more than one page.\n    // Embla owns the measurement: it reports a single snap when every slide fits.\n    const updateCarouselState = () => {\n      setSelectedSlide(carouselApi.selectedScrollSnap())\n      setPageCount(carouselApi.scrollSnapList().length)\n    }\n\n    updateCarouselState()\n    carouselApi.on('select', updateCarouselState)\n    carouselApi.on('reInit', updateCarouselState)\n\n    return () => {\n      carouselApi.off('select', updateCarouselState)\n      carouselApi.off('reInit', updateCarouselState)\n    }\n  }, [carouselApi])\n\n  const canNavigate = pageCount > 1\n\n  return (\n    <section className={cn('py-12 lg:py-20', className)}>\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {(title || description) && (\n          <header className='mb-12 text-center md:mb-16'>\n            {title && <h2 className='text-3xl font-bold text-balance md:text-4xl'>{title}</h2>}\n            {description && <p className='text-muted-foreground mx-auto mt-4 max-w-2xl'>{description}</p>}\n          </header>\n        )}\n\n        <Carousel\n          className='w-full'\n          opts={{ align: 'start', loop: true }}\n          setApi={setCarouselApi}\n          aria-label={title}\n        >\n          <CarouselContent className='-ml-1'>\n            {items.map(item => (\n              <CarouselItem key={item.id} className='basis-full px-4 last:pe-0 sm:basis-1/2 lg:basis-1/3'>\n                <Card className='h-full overflow-hidden border border-border py-6'>\n                  <CardHeader className='gap-0 px-6'>\n                    <TestimonialAttribution item={item} />\n                  </CardHeader>\n                  <CardContent className='px-6'>\n                    <blockquote className='text-muted-foreground text-base'>{item.content}</blockquote>\n                    {item.rating !== undefined && <Rating value={item.rating} />}\n                  </CardContent>\n                </Card>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n          {canNavigate && (\n            <>\n              <CarouselPrevious className='cursor-pointer' aria-label={carouselLabels.previous} />\n              <CarouselNext className='cursor-pointer' aria-label={carouselLabels.next} />\n            </>\n          )}\n        </Carousel>\n        {canNavigate && (\n          <div className='mt-6 flex justify-center gap-2'>\n            {Array.from({ length: pageCount }, (_, index) => (\n              <button\n                key={index}\n                type='button'\n                className={cn(\n                  'size-2 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n                  selectedSlide === index ? 'bg-foreground' : 'bg-muted-foreground/40',\n                )}\n                aria-label={carouselLabels.slide.replace('{n}', String(index + 1))}\n                aria-current={selectedSlide === index ? 'true' : undefined}\n                onClick={() => carouselApi?.scrollTo(index)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n\nexport function TestimonialSection(props: TestimonialSectionProps) {\n  if (props.items.length === 0) return null\n\n  if (props.presentation === 'carousel') {\n    return <CarouselPresentation {...props} />\n  }\n\n  return <BentoPresentation {...props} />\n}\n\nexport default TestimonialSection\n"],"mappings":";AAqEI,SAgJQ,UA9IJ,KAFJ;AAnEJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,OAAO,YAAY;AAC5B,SAAS,UAAU;AACnB,SAAS,QAAQ,gBAAgB,mBAAmB;AACpD,SAAS,MAAM,aAAa,kBAA6B;AACzD;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAoCP,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB,CAAC,IAAI,eAAe,oBAAoB,kBAAkB;AACjF,MAAM,cAAc,CAAC,wBAAwB,0BAA0B,0BAA0B,wBAAwB;AAEzH,SAAS,SAAS,MAAc;AAC9B,SAAO,KACJ,MAAM,GAAG,EACT,IAAI,UAAQ,KAAK,CAAC,CAAC,EACnB,KAAK,EAAE;AACZ;AAEA,SAAS,OAAO,EAAE,MAAM,GAAsB;AAC5C,SACE,qBAAC,SAAI,WAAU,2BAA0B,cAAY,GAAG,KAAK,mBAC1D;AAAA,UAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,UAC7B;AAAA,MAAC;AAAA;AAAA,QAEC,eAAY;AAAA,QACZ,WAAW,GAAG,UAAU,QAAQ,KAAK,MAAM,KAAK,IAAI,oBAAoB,WAAW;AAAA;AAAA,MAF9E;AAAA,IAGP,CACD;AAAA,IACD,oBAAC,UAAK,WAAU,sCAAsC,iBAAM;AAAA,KAC9D;AAEJ;AAEA,SAAS,uBAAuB,EAAE,KAAK,GAA8B;AACnE,SACE,qBAAC,SAAI,WAAU,gDACb;AAAA,yBAAC,UAAO,WAAU,oBACf;AAAA,WAAK,UAAU,oBAAC,eAAY,KAAK,KAAK,UAAU,QAAW,KAAK,KAAK,MAAM,SAAQ,QAAO;AAAA,MAC3F,oBAAC,kBAAgB,mBAAS,KAAK,IAAI,GAAE;AAAA,OACvC;AAAA,IACA,qBAAC,SACC;AAAA,0BAAC,UAAK,WAAU,kCAAkC,eAAK,MAAK;AAAA,MAC3D,KAAK,QAAQ,oBAAC,UAAK,WAAU,uCAAuC,eAAK,MAAK;AAAA,OACjF;AAAA,KACF;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,SACE,oBAAC,aAAQ,WAAW,GAAG,kBAAkB,SAAS,GAChD,+BAAC,SAAI,WAAU,+EACX;AAAA,cAAS,gBACT,qBAAC,YAAO,WAAU,oFACf;AAAA,eAAS,oBAAC,QAAG,WAAU,wDAAwD,iBAAM;AAAA,MACrF,eACC,oBAAC,OAAE,WAAU,+DACV,uBACH;AAAA,OAEJ;AAAA,IAGF,oBAAC,SAAI,WAAU,2DACZ,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,YAAM,YAAY,QAAQ,iBAAiB;AAE3C,aACE,qBAAC,QAAmB,WAAW,iBAAiB,SAAS,GACtD;AAAA,sBAAc,KACb,oBAAC,cAAW,WAAU,QACpB,8BAAC,SAAI,WAAU,mCACb,8BAAC,SAAM,WAAU,+CAA8C,eAAY,QAAO,GACpF,GACF;AAAA,QAEF,oBAAC,eAAY,WAAW,eAAe,SAAS,GAC9C,+BAAC,gBAAW,WAAU,0CACpB;AAAA,8BAAC,OAAE,WAAW,YAAY,SAAS,GAAI,eAAK,SAAQ;AAAA,UACpD,oBAAC,0BAAuB,MAAY;AAAA,UACnC,KAAK,WAAW,UAAa,oBAAC,UAAO,OAAO,KAAK,QAAQ;AAAA,WAC5D,GACF;AAAA,WAdS,KAAK,EAehB;AAAA,IAEJ,CAAC,GACH;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEG;AACD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB;AAC5D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AACpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAE5C,YAAU,MAAM;AACd,QAAI,CAAC,YAAa;AAIlB,UAAM,sBAAsB,MAAM;AAChC,uBAAiB,YAAY,mBAAmB,CAAC;AACjD,mBAAa,YAAY,eAAe,EAAE,MAAM;AAAA,IAClD;AAEA,wBAAoB;AACpB,gBAAY,GAAG,UAAU,mBAAmB;AAC5C,gBAAY,GAAG,UAAU,mBAAmB;AAE5C,WAAO,MAAM;AACX,kBAAY,IAAI,UAAU,mBAAmB;AAC7C,kBAAY,IAAI,UAAU,mBAAmB;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,cAAc,YAAY;AAEhC,SACE,oBAAC,aAAQ,WAAW,GAAG,kBAAkB,SAAS,GAChD,+BAAC,SAAI,WAAU,iDACX;AAAA,cAAS,gBACT,qBAAC,YAAO,WAAU,8BACf;AAAA,eAAS,oBAAC,QAAG,WAAU,+CAA+C,iBAAM;AAAA,MAC5E,eAAe,oBAAC,OAAE,WAAU,gDAAgD,uBAAY;AAAA,OAC3F;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAM,EAAE,OAAO,SAAS,MAAM,KAAK;AAAA,QACnC,QAAQ;AAAA,QACR,cAAY;AAAA,QAEZ;AAAA,8BAAC,mBAAgB,WAAU,SACxB,gBAAM,IAAI,UACT,oBAAC,gBAA2B,WAAU,uDACpC,+BAAC,QAAK,WAAU,oDACd;AAAA,gCAAC,cAAW,WAAU,cACpB,8BAAC,0BAAuB,MAAY,GACtC;AAAA,YACA,qBAAC,eAAY,WAAU,QACrB;AAAA,kCAAC,gBAAW,WAAU,mCAAmC,eAAK,SAAQ;AAAA,cACrE,KAAK,WAAW,UAAa,oBAAC,UAAO,OAAO,KAAK,QAAQ;AAAA,eAC5D;AAAA,aACF,KATiB,KAAK,EAUxB,CACD,GACH;AAAA,UACC,eACC,iCACE;AAAA,gCAAC,oBAAiB,WAAU,kBAAiB,cAAY,eAAe,UAAU;AAAA,YAClF,oBAAC,gBAAa,WAAU,kBAAiB,cAAY,eAAe,MAAM;AAAA,aAC5E;AAAA;AAAA;AAAA,IAEJ;AAAA,IACC,eACC,oBAAC,SAAI,WAAU,kCACZ,gBAAM,KAAK,EAAE,QAAQ,UAAU,GAAG,CAAC,GAAG,UACrC;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,kBAAkB,QAAQ,kBAAkB;AAAA,QAC9C;AAAA,QACA,cAAY,eAAe,MAAM,QAAQ,OAAO,OAAO,QAAQ,CAAC,CAAC;AAAA,QACjE,gBAAc,kBAAkB,QAAQ,SAAS;AAAA,QACjD,SAAS,MAAM,aAAa,SAAS,KAAK;AAAA;AAAA,MARrC;AAAA,IASP,CACD,GACH;AAAA,KAEJ,GACF;AAEJ;AAEO,SAAS,mBAAmB,OAAgC;AACjE,MAAI,MAAM,MAAM,WAAW,EAAG,QAAO;AAErC,MAAI,MAAM,iBAAiB,YAAY;AACrC,WAAO,oBAAC,wBAAsB,GAAG,OAAO;AAAA,EAC1C;AAEA,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACvC;AAEA,IAAO,8BAAQ;","names":[]}

package/dist/blocks/shared/reaction-toggle.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentType } from 'react';
+type ReactionIconProps = {
+    className?: string;
+};
+type ReactionToggleProps = {
+    active: boolean;
+    icon: ComponentType<ReactionIconProps>;
+    className?: string;
+    iconClassName?: string;
+    activeColorClassName?: string;
+};
+export declare function ReactionToggle({ active, icon: Icon, className, iconClassName, activeColorClassName, }: ReactionToggleProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=reaction-toggle.d.ts.map

package/dist/blocks/shared/reaction-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reaction-toggle.d.ts","sourceRoot":"","sources":["../../../src/blocks/shared/reaction-toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AA2CvE,KAAK,iBAAiB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAyBD,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,IAAI,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,IAAI,EAAE,IAAI,EACV,SAAS,EACT,aAAa,EACb,oBAAqC,GACtC,EAAE,mBAAmB,+BA0DrB"}

package/dist/blocks/shared/reaction-toggle.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 reaction_toggle_exports = {};
+__export(reaction_toggle_exports, {
+  ReactionToggle: () => ReactionToggle
+});
+module.exports = __toCommonJS(reaction_toggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_utils = require("../../lib/utils.js");
+const PARTICLE_COUNT = 8;
+const STYLE_MARKER = "data-reaction-toggle-keyframes";
+const STYLES = `
+@keyframes reaction-toggle-pop {
+  0% { transform: scale(1); }
+  30% { transform: scale(0.82); }
+  100% { transform: scale(1); }
+}
+@keyframes reaction-toggle-burst {
+  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
+  20% { opacity: 1; transform: translate(calc(var(--rx) * 0.25), calc(var(--ry) * 0.25)) scale(1); }
+  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(0.6); }
+}
+.reaction-toggle-pop {
+  animation: reaction-toggle-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);
+}
+.reaction-toggle-burst {
+  animation-name: reaction-toggle-burst;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reaction-toggle-pop,
+  .reaction-toggle-burst { animation: none !important; }
+}
+`;
+function useReactionToggleStyles() {
+  (0, import_react.useEffect)(() => {
+    if (document.head.querySelector(`[${STYLE_MARKER}]`)) return;
+    const style = document.createElement("style");
+    style.setAttribute(STYLE_MARKER, "");
+    style.textContent = STYLES;
+    document.head.append(style);
+  }, []);
+}
+function buildParticles() {
+  return Array.from({ length: PARTICLE_COUNT }, (_, i) => {
+    const angle = Math.PI * 2 * i / PARTICLE_COUNT + (Math.random() - 0.5) * 0.4;
+    const dist = 16 + Math.random() * 10;
+    return {
+      rx: Math.round(Math.cos(angle) * dist * 10) / 10,
+      ry: Math.round(Math.sin(angle) * dist * 10) / 10,
+      duration: Math.round(500 + Math.random() * 200),
+      delay: Math.round(Math.random() * 60),
+      size: Math.round((0.7 + Math.random() * 0.8) * 100) / 100
+    };
+  });
+}
+function ReactionToggle({
+  active,
+  icon: Icon,
+  className,
+  iconClassName,
+  activeColorClassName = "text-primary"
+}) {
+  const [isBursting, setIsBursting] = (0, import_react.useState)(false);
+  const wasActive = (0, import_react.useRef)(active);
+  const particlesRef = (0, import_react.useRef)(buildParticles());
+  useReactionToggleStyles();
+  (0, import_react.useEffect)(() => {
+    if (active && !wasActive.current) {
+      particlesRef.current = buildParticles();
+      setIsBursting(true);
+      const timeout = setTimeout(() => setIsBursting(false), 700);
+      wasActive.current = active;
+      return () => clearTimeout(timeout);
+    }
+    wasActive.current = active;
+  }, [active]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: (0, import_utils.cn)("relative inline-flex", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)("inline-flex", active && "reaction-toggle-pop"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Icon,
+      {
+        className: (0, import_utils.cn)(
+          "transition-[fill,stroke,color] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]",
+          active ? (0, import_utils.cn)("fill-current", activeColorClassName) : "fill-transparent",
+          iconClassName
+        )
+      }
+    ) }),
+    isBursting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: (0, import_utils.cn)("pointer-events-none absolute top-1/2 left-1/2 size-0", activeColorClassName),
+        children: particlesRef.current.map((particle, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "i",
+          {
+            className: "reaction-toggle-burst absolute rounded-full bg-current opacity-0",
+            style: {
+              "--rx": `${particle.rx}px`,
+              "--ry": `${particle.ry}px`,
+              animationDuration: `${particle.duration}ms`,
+              animationDelay: `${particle.delay}ms`,
+              width: `${2.5 * particle.size}px`,
+              height: `${2.5 * particle.size}px`,
+              left: `${-1.25 * particle.size}px`,
+              top: `${-1.25 * particle.size}px`
+            }
+          },
+          index
+        ))
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReactionToggle
+});
+//# sourceMappingURL=reaction-toggle.js.map

package/dist/blocks/shared/reaction-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/shared/reaction-toggle.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState, type ComponentType } from 'react'\n\nimport { cn } from '../../lib/utils'\n\nconst PARTICLE_COUNT = 8\n\nconst STYLE_MARKER = 'data-reaction-toggle-keyframes'\nconst STYLES = `\n@keyframes reaction-toggle-pop {\n  0% { transform: scale(1); }\n  30% { transform: scale(0.82); }\n  100% { transform: scale(1); }\n}\n@keyframes reaction-toggle-burst {\n  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }\n  20% { opacity: 1; transform: translate(calc(var(--rx) * 0.25), calc(var(--ry) * 0.25)) scale(1); }\n  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(0.6); }\n}\n.reaction-toggle-pop {\n  animation: reaction-toggle-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);\n}\n.reaction-toggle-burst {\n  animation-name: reaction-toggle-burst;\n  animation-timing-function: ease-out;\n  animation-fill-mode: forwards;\n}\n@media (prefers-reduced-motion: reduce) {\n  .reaction-toggle-pop,\n  .reaction-toggle-burst { animation: none !important; }\n}\n`\n\nfunction useReactionToggleStyles() {\n  useEffect(() => {\n    if (document.head.querySelector(`[${STYLE_MARKER}]`)) return\n\n    const style = document.createElement('style')\n    style.setAttribute(STYLE_MARKER, '')\n    style.textContent = STYLES\n    document.head.append(style)\n  }, [])\n}\n\ntype ReactionIconProps = {\n  className?: string\n}\n\ntype Particle = {\n  rx: number\n  ry: number\n  duration: number\n  delay: number\n  size: number\n}\n\nfunction buildParticles(): Particle[] {\n  return Array.from({ length: PARTICLE_COUNT }, (_, i) => {\n    const angle = (Math.PI * 2 * i) / PARTICLE_COUNT + (Math.random() - 0.5) * 0.4\n    const dist = 16 + Math.random() * 10\n\n    return {\n      rx: Math.round(Math.cos(angle) * dist * 10) / 10,\n      ry: Math.round(Math.sin(angle) * dist * 10) / 10,\n      duration: Math.round(500 + Math.random() * 200),\n      delay: Math.round(Math.random() * 60),\n      size: Math.round((0.7 + Math.random() * 0.8) * 100) / 100,\n    }\n  })\n}\n\ntype ReactionToggleProps = {\n  active: boolean\n  icon: ComponentType<ReactionIconProps>\n  className?: string\n  iconClassName?: string\n  activeColorClassName?: string\n}\n\nexport function ReactionToggle({\n  active,\n  icon: Icon,\n  className,\n  iconClassName,\n  activeColorClassName = 'text-primary',\n}: ReactionToggleProps) {\n  const [isBursting, setIsBursting] = useState(false)\n  const wasActive = useRef(active)\n  const particlesRef = useRef<Particle[]>(buildParticles())\n\n  useReactionToggleStyles()\n\n  useEffect(() => {\n    if (active && !wasActive.current) {\n      particlesRef.current = buildParticles()\n      setIsBursting(true)\n      const timeout = setTimeout(() => setIsBursting(false), 700)\n      wasActive.current = active\n      return () => clearTimeout(timeout)\n    }\n\n    wasActive.current = active\n  }, [active])\n\n  return (\n    <span className={cn('relative inline-flex', className)}>\n      <span className={cn('inline-flex', active && 'reaction-toggle-pop')}>\n        <Icon\n          className={cn(\n            'transition-[fill,stroke,color] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]',\n            active ? cn('fill-current', activeColorClassName) : 'fill-transparent',\n            iconClassName\n          )}\n        />\n      </span>\n\n      {isBursting && (\n        <span\n          aria-hidden='true'\n          className={cn('pointer-events-none absolute top-1/2 left-1/2 size-0', activeColorClassName)}\n        >\n          {particlesRef.current.map((particle, index) => (\n            <i\n              key={index}\n              className='reaction-toggle-burst absolute rounded-full bg-current opacity-0'\n              style={\n                {\n                  '--rx': `${particle.rx}px`,\n                  '--ry': `${particle.ry}px`,\n                  animationDuration: `${particle.duration}ms`,\n                  animationDelay: `${particle.delay}ms`,\n                  width: `${2.5 * particle.size}px`,\n                  height: `${2.5 * particle.size}px`,\n                  left: `${-1.25 * particle.size}px`,\n                  top: `${-1.25 * particle.size}px`,\n                } as React.CSSProperties\n              }\n            />\n          ))}\n        </span>\n      )}\n    </span>\n  )\n}"],"mappings":"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","names":[]}