@planetaexo/design-system 0.93.1 → 0.95.0

package/dist/index.d.cts

@@ -3174,7 +3174,18 @@ declare function MenuTrip({ sections, activeSection, onSelect, variant, bold, cl
 
 type PhotoGalleryVariant = "grid" | "gridCompact" | "masonry" | "filmstrip" | "featured" | "collage" | "collageTight" | "carousel" | "fullBleed";
 interface PhotoGalleryPhoto {
+    /**
+     * Full-resolution image — shown in the lightbox / opened photo tour, and the
+     * fallback the grid thumbnails use when {@link thumbSrc} is omitted.
+     */
     src: string;
+    /**
+     * Optional smaller image for the grid thumbnails (grid/gridCompact/masonry/
+     * filmstrip/featured/collage tiles). Lets a consumer serve a lightweight,
+     * resized variant in the gallery grid while the lightbox still opens the
+     * full-resolution {@link src}. Falls back to {@link src} when omitted.
+     */
+    thumbSrc?: string;
     alt?: string;
     /** Caption displayed in the lightbox bottom-left */
     caption?: string;
@@ -5429,10 +5440,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

@@ -3174,7 +3174,18 @@ declare function MenuTrip({ sections, activeSection, onSelect, variant, bold, cl
 
 type PhotoGalleryVariant = "grid" | "gridCompact" | "masonry" | "filmstrip" | "featured" | "collage" | "collageTight" | "carousel" | "fullBleed";
 interface PhotoGalleryPhoto {
+    /**
+     * Full-resolution image — shown in the lightbox / opened photo tour, and the
+     * fallback the grid thumbnails use when {@link thumbSrc} is omitted.
+     */
     src: string;
+    /**
+     * Optional smaller image for the grid thumbnails (grid/gridCompact/masonry/
+     * filmstrip/featured/collage tiles). Lets a consumer serve a lightweight,
+     * resized variant in the gallery grid while the lightbox still opens the
+     * full-resolution {@link src}. Falls back to {@link src} when omitted.
+     */
+    thumbSrc?: string;
     alt?: string;
     /** Caption displayed in the lightbox bottom-left */
     caption?: string;
@@ -5429,10 +5440,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

@@ -12541,7 +12541,7 @@ function PhotoTile({
   onClick,
   showCredit = false
 }) {
-  var _a, _b;
+  var _a, _b, _c;
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -12556,8 +12556,8 @@ function PhotoTile({
         /* @__PURE__ */ jsx(
           Picture,
           {
-            src: photo.src,
-            alt: (_b = photo.alt) != null ? _b : `Photo ${index + 1}`,
+            src: (_b = photo.thumbSrc) != null ? _b : photo.src,
+            alt: (_c = photo.alt) != null ? _c : `Photo ${index + 1}`,
             title: photo.caption,
             className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105",
             loading: "lazy"
@@ -12674,7 +12674,7 @@ function MasonryGallery({
   const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "columns-2 sm:columns-3 gap-1 [&>*]:break-inside-avoid [&>*]:mb-1", children: visible.map((p, i) => {
-      var _a, _b;
+      var _a, _b, _c;
       return /* @__PURE__ */ jsxs(
         "button",
         {
@@ -12686,8 +12686,8 @@ function MasonryGallery({
             /* @__PURE__ */ jsx(
               Picture,
               {
-                src: p.src,
-                alt: (_b = p.alt) != null ? _b : `Photo ${i + 1}`,
+                src: (_b = p.thumbSrc) != null ? _b : p.src,
+                alt: (_c = p.alt) != null ? _c : `Photo ${i + 1}`,
                 title: p.caption,
                 className: "w-full h-auto object-cover transition-transform duration-700 group-hover:scale-105",
                 loading: "lazy"
@@ -12715,7 +12715,7 @@ function FilmstripGallery({
   onOpen
 }) {
   return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto flex gap-1 snap-x snap-mandatory pb-1 scrollbar-none", children: photos.map((p, i) => {
-    var _a, _b;
+    var _a, _b, _c;
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -12727,8 +12727,8 @@ function FilmstripGallery({
           /* @__PURE__ */ jsx(
             Picture,
             {
-              src: p.src,
-              alt: (_b = p.alt) != null ? _b : `Photo ${i + 1}`,
+              src: (_b = p.thumbSrc) != null ? _b : p.src,
+              alt: (_c = p.alt) != null ? _c : `Photo ${i + 1}`,
               title: p.caption,
               className: "h-full w-full object-cover transition-transform duration-700 group-hover:scale-105",
               loading: "lazy"
@@ -12782,7 +12782,7 @@ function FeaturedGallery({
       ] })
     ] }),
     expanded && extra.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1.5 overflow-x-auto flex gap-1.5 snap-x snap-mandatory scrollbar-none rounded-xl overflow-hidden pb-0", children: extra.map((p, i) => {
-      var _a, _b;
+      var _a, _b, _c;
       return /* @__PURE__ */ jsxs(
         "button",
         {
@@ -12794,8 +12794,8 @@ function FeaturedGallery({
             /* @__PURE__ */ jsx(
               Picture,
               {
-                src: p.src,
-                alt: (_b = p.alt) != null ? _b : `Photo ${i + 4}`,
+                src: (_b = p.thumbSrc) != null ? _b : p.src,
+                alt: (_c = p.alt) != null ? _c : `Photo ${i + 4}`,
                 title: p.caption,
                 className: "h-full w-full object-cover transition-transform duration-700 group-hover:scale-105",
                 loading: "lazy"
@@ -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