@planetaexo/design-system 0.93.1 → 0.94.0

package/dist/index.d.cts

@@ -5429,10 +5429,13 @@ interface ReviewsSpotlightProps {
     className?: string;
 }
 /**
- * ReviewsSpotlight — a single rotating testimonial. One large serif quote with
- * Trustpilot stars, auto-advancing through `items` with clickable dots and a
- * short crossfade. Honours `prefers-reduced-motion` (no auto-advance, instant
- * swap). The dark band matches the rest of {@link NewHome}.
+ * ReviewsSpotlight — a swipeable row of testimonials. Each review is a
+ * full-width slide on a native horizontal scroll-snap track, so on touch it
+ * can be flicked one review at a time; on desktop the dots advance it. One
+ * large serif quote with Trustpilot stars, auto-advancing through `items` with
+ * the pagination dots synced to scroll position. Autoplay pauses on
+ * hover / focus / active swipe and is skipped entirely under
+ * `prefers-reduced-motion`. The dark band matches the rest of {@link NewHome}.
  */
 declare function ReviewsSpotlight({ eyebrow, title, link, items, intervalMs, className, }: ReviewsSpotlightProps): react_jsx_runtime.JSX.Element | null;
 

package/dist/index.d.ts

@@ -5429,10 +5429,13 @@ interface ReviewsSpotlightProps {
     className?: string;
 }
 /**
- * ReviewsSpotlight — a single rotating testimonial. One large serif quote with
- * Trustpilot stars, auto-advancing through `items` with clickable dots and a
- * short crossfade. Honours `prefers-reduced-motion` (no auto-advance, instant
- * swap). The dark band matches the rest of {@link NewHome}.
+ * ReviewsSpotlight — a swipeable row of testimonials. Each review is a
+ * full-width slide on a native horizontal scroll-snap track, so on touch it
+ * can be flicked one review at a time; on desktop the dots advance it. One
+ * large serif quote with Trustpilot stars, auto-advancing through `items` with
+ * the pagination dots synced to scroll position. Autoplay pauses on
+ * hover / focus / active swipe and is skipped entirely under
+ * `prefers-reduced-motion`. The dark band matches the rest of {@link NewHome}.
  */
 declare function ReviewsSpotlight({ eyebrow, title, link, items, intervalMs, className, }: ReviewsSpotlightProps): react_jsx_runtime.JSX.Element | null;
 

package/dist/index.js

@@ -20210,10 +20210,18 @@ function ReviewsSpotlight({
   intervalMs = 7e3,
   className
 }) {
+  const trackRef = React20.useRef(null);
   const [index, setIndex] = React20.useState(0);
-  const [visible, setVisible] = React20.useState(true);
   const reduced = React20.useRef(false);
-  const swapRef = React20.useRef(null);
+  const hoverRef = React20.useRef(false);
+  const focusRef = React20.useRef(false);
+  const interactRef = React20.useRef(false);
+  const programmaticRef = React20.useRef(false);
+  const rafRef = React20.useRef(null);
+  const interactTimer = React20.useRef(null);
+  const programmaticTimer = React20.useRef(
+    null
+  );
   React20.useEffect(() => {
     var _a;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -20227,56 +20235,107 @@ function ReviewsSpotlight({
       return (_a2 = mq.removeEventListener) == null ? void 0 : _a2.call(mq, "change", onChange);
     };
   }, []);
-  const goTo = React20.useCallback((resolve) => {
-    if (reduced.current) {
-      setIndex((i) => resolve(i));
-      return;
+  const scrollToIndex = React20.useCallback((i) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const smooth = !reduced.current;
+    programmaticRef.current = true;
+    el.scrollTo({ left: i * el.clientWidth, behavior: smooth ? "smooth" : "auto" });
+    if (programmaticTimer.current) clearTimeout(programmaticTimer.current);
+    programmaticTimer.current = setTimeout(
+      () => {
+        programmaticRef.current = false;
+      },
+      smooth ? 600 : 50
+    );
+  }, []);
+  const onScroll = React20.useCallback(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      const i = Math.round(el.scrollLeft / Math.max(1, el.clientWidth));
+      setIndex((prev) => prev === i ? prev : i);
+    });
+    if (!programmaticRef.current) {
+      interactRef.current = true;
+      if (interactTimer.current) clearTimeout(interactTimer.current);
+      interactTimer.current = setTimeout(() => {
+        interactRef.current = false;
+      }, 1500);
     }
-    setVisible(false);
-    swapRef.current = setTimeout(() => {
-      setIndex((i) => resolve(i));
-      setVisible(true);
-    }, 260);
   }, []);
   React20.useEffect(() => {
     if (items.length <= 1 || intervalMs <= 0) return;
     const id = setInterval(() => {
-      if (!reduced.current) goTo((i) => (i + 1) % items.length);
+      if (reduced.current) return;
+      if (hoverRef.current || focusRef.current || interactRef.current) return;
+      const el = trackRef.current;
+      if (!el) return;
+      const cur = Math.round(el.scrollLeft / Math.max(1, el.clientWidth));
+      scrollToIndex((cur + 1) % items.length);
     }, intervalMs);
-    return () => {
-      clearInterval(id);
-      if (swapRef.current) clearTimeout(swapRef.current);
-    };
-  }, [items.length, intervalMs, goTo]);
+    return () => clearInterval(id);
+  }, [items.length, intervalMs, scrollToIndex]);
+  React20.useEffect(
+    () => () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      if (interactTimer.current) clearTimeout(interactTimer.current);
+      if (programmaticTimer.current) clearTimeout(programmaticTimer.current);
+    },
+    []
+  );
   if (!items.length) return null;
-  const safe = Math.min(index, items.length - 1);
-  const review = items[safe];
+  const active = Math.min(index, items.length - 1);
   return /* @__PURE__ */ jsx(
     "section",
     {
       className: cn(SURFACE_PRIMARY_9002, "py-24 text-white sm:py-32", className),
+      onMouseEnter: () => {
+        hoverRef.current = true;
+      },
+      onMouseLeave: () => {
+        hoverRef.current = false;
+      },
+      onFocus: () => {
+        focusRef.current = true;
+      },
+      onBlur: () => {
+        focusRef.current = false;
+      },
       children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl px-6 text-center sm:px-8", children: [
         eyebrow && /* @__PURE__ */ jsx("p", { className: "font-ui text-xs font-bold uppercase tracking-[0.22em] text-primary", children: eyebrow }),
         /* @__PURE__ */ jsx("h2", { className: "sr-only", children: title }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "transition-opacity duration-300",
-              visible ? "opacity-100" : "opacity-0"
-            ),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "mt-8 flex justify-center", children: /* @__PURE__ */ jsx(TrustpilotStars, { stars: review.stars, className: "h-7 w-7" }) }),
-              /* @__PURE__ */ jsxs("blockquote", { className: "mx-auto mt-8 max-w-[20ch] font-sans text-3xl font-normal italic leading-[1.3] text-white sm:text-4xl", children: [
-                "\u201C",
-                review.quote,
-                "\u201D"
-              ] }),
-              (review.author || review.location) && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-                review.author && /* @__PURE__ */ jsx("p", { className: "font-ui text-base font-bold tracking-wide text-white", children: review.author }),
-                review.location && /* @__PURE__ */ jsx("p", { className: "mt-1 font-sans text-sm text-white/55", children: review.location })
-              ] })
-            ]
+            ref: trackRef,
+            onScroll,
+            "aria-roledescription": "carousel",
+            "aria-label": title,
+            className: "flex snap-x snap-mandatory overflow-x-auto scrollbar-none",
+            children: items.map((review, i) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "group",
+                "aria-roledescription": "slide",
+                "aria-label": `Review ${i + 1} of ${items.length}`,
+                className: "w-full shrink-0 snap-start",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "mt-8 flex justify-center", children: /* @__PURE__ */ jsx(TrustpilotStars, { stars: review.stars, className: "h-7 w-7" }) }),
+                  /* @__PURE__ */ jsxs("blockquote", { className: "mx-auto mt-8 flex min-h-[15rem] max-w-[20ch] items-center justify-center font-sans text-3xl font-normal italic leading-[1.3] text-white sm:min-h-[18rem] sm:text-4xl", children: [
+                    "\u201C",
+                    review.quote,
+                    "\u201D"
+                  ] }),
+                  (review.author || review.location) && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+                    review.author && /* @__PURE__ */ jsx("p", { className: "font-ui text-base font-bold tracking-wide text-white", children: review.author }),
+                    review.location && /* @__PURE__ */ jsx("p", { className: "mt-1 font-sans text-sm text-white/55", children: review.location })
+                  ] })
+                ]
+              },
+              i
+            ))
           }
         ),
         items.length > 1 && /* @__PURE__ */ jsx("div", { className: "mt-10 flex justify-center gap-2.5", children: items.map((_, i) => /* @__PURE__ */ jsx(
@@ -20284,11 +20343,11 @@ function ReviewsSpotlight({
           {
             type: "button",
             "aria-label": `Show review ${i + 1} of ${items.length}`,
-            "aria-current": i === safe,
-            onClick: () => goTo(() => i),
+            "aria-current": i === active,
+            onClick: () => scrollToIndex(i),
             className: cn(
               "h-2 w-2 rounded-full transition-colors",
-              i === safe ? "bg-primary" : "bg-white/25 hover:bg-white/45"
+              i === active ? "bg-primary" : "bg-white/25 hover:bg-white/45"
             )
           },
           i