@dreamtree-org/twreact-ui 2.1.2 → 2.2.5

package/dist/esm/components/motion/RotatingBadge.js

@@ -0,0 +1,66 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["text", "speed", "size", "icon", "className", "style"];
+var RADIUS = 38;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+/**
+ * A circular badge with text set around its edge, slowly turning (SVG `textPath`). The
+ * text is spread to fill the circle exactly. Exposed as one image named by `text`
+ * (override with `aria-label`); it stops turning under reduced motion.
+ */
+var RotatingBadge = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var text = _ref.text,
+    _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? 14 : _ref$speed,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 120 : _ref$size,
+    icon = _ref.icon,
+    className = _ref.className,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var pathId = "dt-badge-".concat(useId().replace(/:/g, ""));
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    role: "img",
+    "aria-label": text,
+    className: cn("relative inline-flex shrink-0 items-center justify-center rounded-full text-foreground", className),
+    style: _objectSpread2({
+      width: size,
+      height: size
+    }, style)
+  }, rest), {}, {
+    children: [jsxs("svg", {
+      viewBox: "0 0 100 100",
+      "aria-hidden": "true",
+      className: "absolute inset-0 h-full w-full animate-spin motion-reduce:animate-none",
+      style: {
+        animationDuration: "".concat(speed, "s")
+      },
+      children: [jsx("defs", {
+        children: jsx("path", {
+          id: pathId,
+          d: "M 50,50 m -".concat(RADIUS, ",0 a ").concat(RADIUS, ",").concat(RADIUS, " 0 1,1 ").concat(RADIUS * 2, ",0 a ").concat(RADIUS, ",").concat(RADIUS, " 0 1,1 -").concat(RADIUS * 2, ",0")
+        })
+      }), jsx("text", {
+        className: "fill-current text-[8.5px] font-semibold uppercase",
+        children: jsx("textPath", {
+          href: "#".concat(pathId),
+          textLength: CIRCUMFERENCE - 2,
+          lengthAdjust: "spacing",
+          children: text
+        })
+      })]
+    }), icon ? jsx("span", {
+      "aria-hidden": "true",
+      className: "relative",
+      children: icon
+    }) : null]
+  }));
+});
+RotatingBadge.displayName = "RotatingBadge";
+
+export { RotatingBadge as default };

package/dist/esm/components/motion/ScrollStage.js

@@ -0,0 +1,62 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { useScrollProgress } from '../../hooks/useScrollProgress.js';
+import { useMergedRef } from '../../motion/engine/useMergedRef.js';
+import { MOBILE_QUERY, SCENE_LENGTH_MOBILE, SCENE_LENGTH } from '../../motion/tokens.js';
+
+var _excluded = ["length", "mobileLength", "pin", "children", "onProgress", "className", "contentClassName", "style", "as"];
+/**
+ * A pinned scroll scene: a tall section whose content sticks to the viewport while the
+ * user scrolls through `length` vh. Progress (0–1) is written to `--dt-p` on the root, so
+ * children animate with CSS (`opacity: var(--dt-p, 1)`), and passed to `children(progress)`
+ * and `onProgress`. Under reduced motion, or with `pin={false}`, it renders in normal flow
+ * at its final state.
+ */
+var ScrollStage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$length = _ref.length,
+    length = _ref$length === void 0 ? SCENE_LENGTH : _ref$length,
+    _ref$mobileLength = _ref.mobileLength,
+    mobileLength = _ref$mobileLength === void 0 ? SCENE_LENGTH_MOBILE : _ref$mobileLength,
+    _ref$pin = _ref.pin,
+    pin = _ref$pin === void 0 ? true : _ref$pin,
+    children = _ref.children,
+    onProgress = _ref.onProgress,
+    className = _ref.className,
+    contentClassName = _ref.contentClassName,
+    style = _ref.style,
+    _ref$as = _ref.as,
+    Tag = _ref$as === void 0 ? "section" : _ref$as,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var local = useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion();
+  var mobile = useMediaQuery(MOBILE_QUERY);
+  var pinned = pin && !reduced;
+  var progress = useScrollProgress(local, {
+    mode: "pin",
+    enabled: pinned,
+    onChange: onProgress
+  });
+  var vh = mobile ? mobileLength : length;
+  return jsx(Tag, _objectSpread2(_objectSpread2({
+    ref: setRef,
+    "data-dt-stage": pinned ? "pinned" : "static",
+    className: cn("relative", className),
+    style: pinned ? _objectSpread2({
+      height: "".concat(Math.max(vh, 100), "vh")
+    }, style) : style
+  }, rest), {}, {
+    children: jsx("div", {
+      className: cn(pinned && "sticky top-0 h-screen overflow-hidden", contentClassName),
+      children: typeof children === "function" ? children(progress) : children
+    })
+  }));
+});
+ScrollStage.displayName = "ScrollStage";
+
+export { ScrollStage as default };

package/dist/esm/components/motion/SmoothScrollProvider.js

@@ -0,0 +1,63 @@
+'use client';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { NATIVE_SCROLL, SmoothScrollContext } from '../../hooks/useSmoothScroll.js';
+import { subscribe } from '../../motion/engine/scheduler.js';
+
+/**
+ * Opt-in smooth (inertial) scrolling with Lenis. Lenis is an optional peer dependency
+ * and is never imported by this package: install it and pass the class —
+ * `<SmoothScrollProvider lenis={Lenis}>`. Without `lenis`, with `enabled={false}` or when
+ * the user prefers reduced motion, the page keeps native scrolling. Lenis runs on the same
+ * frame loop as the other motion components.
+ */
+function SmoothScrollProvider(_ref) {
+  var LenisClass = _ref.lenis,
+    options = _ref.options,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    children = _ref.children;
+  var reduced = useReducedMotion();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    instance = _useState2[0],
+    setInstance = _useState2[1];
+  useEffect(function () {
+    if (!enabled || reduced || typeof LenisClass !== "function") return undefined;
+    var lenis = new LenisClass(_objectSpread2({
+      autoRaf: false
+    }, options));
+    var unsubscribe = subscribe({
+      loop: true,
+      write: function write(_, now) {
+        return lenis.raf(now);
+      }
+    });
+    setInstance(lenis);
+    return function () {
+      unsubscribe();
+      lenis.destroy();
+      setInstance(null);
+    };
+    // `options` is read once per Lenis instance; change `enabled` or `lenis` to rebuild it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [LenisClass, enabled, reduced]);
+  var value = useMemo(function () {
+    return instance ? {
+      lenis: instance,
+      scrollTo: function scrollTo(target) {
+        var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        return instance.scrollTo(target, opts);
+      }
+    } : NATIVE_SCROLL;
+  }, [instance]);
+  return jsx(SmoothScrollContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+SmoothScrollProvider.displayName = "SmoothScrollProvider";
+
+export { SmoothScrollProvider as default };

package/dist/esm/components/motion/StackedCards.js

@@ -0,0 +1,166 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { observe } from '../../motion/engine/inView.js';
+import { subscribe } from '../../motion/engine/scheduler.js';
+import { clamp01 } from '../../motion/engine/progress.js';
+import { useMergedRef } from '../../motion/engine/useMergedRef.js';
+import { SCROLL_STICKY_TOP } from '../../motion/tokens.js';
+
+var _excluded = ["items", "stickyTop", "tilt", "scaleBack", "dimBack", "mediaSide", "renderItem", "className", "style"];
+var isImage = function isImage(media) {
+  return media && _typeof(media) === "object" && ! /*#__PURE__*/React.isValidElement(media) && "src" in media;
+};
+function CardBody(_ref) {
+  var item = _ref.item,
+    flip = _ref.flip;
+  return jsxs("div", {
+    className: "grid gap-8 md:grid-cols-2 md:items-center",
+    children: [jsxs("div", {
+      className: cn("flex flex-col gap-4", flip && "md:order-2"),
+      children: [item.kicker ? jsx("p", {
+        className: "text-micro uppercase tracking-widest text-primary-600 dark:text-primary-400",
+        children: item.kicker
+      }) : null, jsx("h3", {
+        className: "text-section-title font-semibold tracking-tight text-foreground",
+        children: item.title
+      }), item.body ? jsx("div", {
+        className: "text-body text-muted",
+        children: item.body
+      }) : null, item.bullets && item.bullets.length ? jsx("ul", {
+        className: "grid gap-2 sm:grid-cols-2",
+        children: item.bullets.map(function (b, i) {
+          return jsxs("li", {
+            className: "flex items-start gap-2 text-caption text-foreground",
+            children: [jsx("span", {
+              "aria-hidden": "true",
+              className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary-500"
+            }), b]
+          }, i);
+        })
+      }) : null, item.metric || item.cta ? jsxs("div", {
+        className: "mt-2 flex flex-wrap items-end justify-between gap-4",
+        children: [item.metric ? jsxs("p", {
+          className: "flex flex-col",
+          children: [jsx("span", {
+            className: "text-kpi font-semibold text-foreground",
+            children: item.metric.value
+          }), jsx("span", {
+            className: "text-caption text-muted",
+            children: item.metric.label
+          })]
+        }) : null, item.cta]
+      }) : null]
+    }), item.media ? jsx("div", {
+      className: cn("overflow-hidden rounded-card", flip && "md:order-1"),
+      children: isImage(item.media) ? jsx("img", {
+        src: item.media.src,
+        alt: item.media.alt,
+        loading: "lazy",
+        className: "aspect-[4/3] h-full w-full object-cover"
+      }) : item.media
+    }) : null]
+  });
+}
+/**
+ * Cards that stick one over another as the page scrolls (sticky stacking). Cards
+ * underneath shrink and dim as the next one covers them, and each has a slight
+ * alternating tilt so the stack looks hand-placed. Tilt is off below `md` and under
+ * reduced motion; the scale/dim effect is off under reduced motion.
+ */
+var StackedCards = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$stickyTop = _ref2.stickyTop,
+    stickyTop = _ref2$stickyTop === void 0 ? SCROLL_STICKY_TOP : _ref2$stickyTop,
+    _ref2$tilt = _ref2.tilt,
+    tilt = _ref2$tilt === void 0 ? 1 : _ref2$tilt,
+    _ref2$scaleBack = _ref2.scaleBack,
+    scaleBack = _ref2$scaleBack === void 0 ? 0.94 : _ref2$scaleBack,
+    _ref2$dimBack = _ref2.dimBack,
+    dimBack = _ref2$dimBack === void 0 ? 0.15 : _ref2$dimBack,
+    _ref2$mediaSide = _ref2.mediaSide,
+    mediaSide = _ref2$mediaSide === void 0 ? "alternate" : _ref2$mediaSide,
+    renderItem = _ref2.renderItem,
+    className = _ref2.className,
+    style = _ref2.style,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var local = useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion();
+  useEffect(function () {
+    var list = local.current;
+    if (!list || reduced || scaleBack >= 1 && dimBack <= 0) return undefined;
+    var slots = Array.from(list.children);
+    var cards = slots.map(function (li) {
+      return li.firstElementChild;
+    });
+    var measure = function measure() {
+      return slots.map(function (li) {
+        return li.getBoundingClientRect();
+      });
+    };
+    var write = function write(rects) {
+      cards.forEach(function (card, i) {
+        var next = rects[i + 1];
+        // 0 while the next card is a full card-height away, 1 once it has reached the sticky line.
+        var cover = next ? clamp01(1 - (next.top - stickyTop) / Math.max(rects[i].height, 1)) : 0;
+        card.style.setProperty("--dt-scale", String(1 - (1 - scaleBack) * cover));
+        card.style.setProperty("--dt-dim", String(1 - dimBack * cover));
+      });
+    };
+    var unsubscribe = null;
+    var stop = observe(list, function (inView) {
+      if (inView && !unsubscribe) unsubscribe = subscribe({
+        measure: measure,
+        write: write
+      });else if (!inView && unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+    });
+    return function () {
+      stop();
+      if (unsubscribe) unsubscribe();
+      cards.forEach(function (card) {
+        card.style.removeProperty("--dt-scale");
+        card.style.removeProperty("--dt-dim");
+      });
+    };
+  }, [items, stickyTop, scaleBack, dimBack, reduced]);
+  return jsx("ol", _objectSpread2(_objectSpread2({
+    ref: setRef,
+    className: cn("relative flex flex-col gap-8", className),
+    style: style
+  }, rest), {}, {
+    children: items.map(function (item, i) {
+      var _item$id;
+      var deg = tilt ? (i % 2 === 0 ? -1 : 1) * tilt * (1 + i % 3 * 0.5) : 0;
+      var flip = mediaSide === "alternate" && i % 2 === 1;
+      return jsx("li", {
+        className: "sticky",
+        style: {
+          top: "".concat(stickyTop, "px")
+        },
+        children: jsx("article", {
+          className: cn("origin-top rounded-card border border-line bg-surface p-6 shadow-lg dark:bg-background md:p-10",
+          // motion-safe: none of this applies when the OS asks for reduced motion (even before hydration).
+          "motion-safe:[filter:brightness(var(--dt-dim,1))] motion-safe:[transform:scale(var(--dt-scale,1))]", "motion-safe:md:[transform:rotate(var(--dt-tilt,0deg))_scale(var(--dt-scale,1))]"),
+          style: deg ? {
+            "--dt-tilt": "".concat(deg, "deg")
+          } : undefined,
+          children: renderItem ? renderItem(item, i) : jsx(CardBody, {
+            item: item,
+            flip: flip
+          })
+        })
+      }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : i);
+    })
+  }));
+});
+StackedCards.displayName = "StackedCards";
+
+export { StackedCards as default };

package/dist/esm/components/motion/StatStrip.js

@@ -0,0 +1,58 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import CountUp from './CountUp.js';
+
+var _excluded = ["items", "variant", "duration", "locale", "className"];
+var COLS = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4"
+};
+/**
+ * A row of headline numbers that count up on view — as bordered cards or one band with
+ * dividers. A description list: each label is a `<dt>`, each number its `<dd>`.
+ */
+var StatStrip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "cards" : _ref$variant,
+    duration = _ref.duration,
+    locale = _ref.locale,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cards = variant !== "band";
+  var cols = COLS[Math.min(items.length, 4)] || COLS[4];
+  return jsx("dl", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("grid grid-cols-2", cols, cards ? "gap-4" : "gap-y-6 rounded-card border border-line bg-surface py-6 dark:bg-background sm:divide-x sm:divide-line", className)
+  }, rest), {}, {
+    children: items.map(function (item, i) {
+      return jsxs("div", {
+        className: cn("flex flex-col-reverse gap-1", cards ? "rounded-card border border-line bg-surface p-6 shadow-xs dark:bg-background" : "px-6 text-center"),
+        children: [jsx("dt", {
+          className: "text-caption text-muted",
+          children: item.label
+        }), jsx("dd", {
+          className: "text-kpi font-semibold tracking-tight text-foreground",
+          children: jsx(CountUp, {
+            value: item.value,
+            prefix: item.prefix,
+            suffix: item.suffix,
+            decimals: item.decimals,
+            format: item.format,
+            duration: duration,
+            locale: locale
+          })
+        })]
+      }, i);
+    })
+  }));
+});
+StatStrip.displayName = "StatStrip";
+
+export { StatStrip as default };

package/dist/esm/components/motion/TestimonialSpotlight.js

@@ -0,0 +1,209 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useId, useState, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { observe } from '../../motion/engine/inView.js';
+import { useMergedRef } from '../../motion/engine/useMergedRef.js';
+
+var _excluded = ["items", "autoplay", "grid", "label", "className"];
+var isImage = function isImage(logo) {
+  return logo && _typeof(logo) === "object" && ! /*#__PURE__*/React.isValidElement(logo) && "src" in logo;
+};
+function Logo(_ref) {
+  var logo = _ref.logo,
+    decorative = _ref.decorative;
+  if (!logo) return null;
+  if (isImage(logo)) {
+    return jsx("img", {
+      src: logo.src,
+      alt: decorative ? "" : logo.alt,
+      className: "max-h-10 max-w-[70%] object-contain"
+    });
+  }
+  return decorative ? jsx("span", {
+    "aria-hidden": "true",
+    children: logo
+  }) : logo;
+}
+/**
+ * Client quotes with a 3×3 tile grid of logos: the active client's logo sits in the centre
+ * tile and the quote beside it. Dots are a tab list (arrow keys, Home/End). Autoplay pauses
+ * on hover, while focus is inside, while off screen and under reduced motion, and has a
+ * visible pause button (WCAG 2.2.2).
+ */
+var TestimonialSpotlight = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$autoplay = _ref2.autoplay,
+    autoplay = _ref2$autoplay === void 0 ? 6000 : _ref2$autoplay,
+    _ref2$grid = _ref2.grid,
+    grid = _ref2$grid === void 0 ? true : _ref2$grid,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? "Testimonials" : _ref2$label,
+    className = _ref2.className,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var local = useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion();
+  var id = useId();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    paused = _useState4[0],
+    setPaused = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hovered = _useState6[0],
+    setHovered = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    focused = _useState8[0],
+    setFocused = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    inView = _useState0[0],
+    setInView = _useState0[1];
+  var count = items.length;
+  var playing = autoplay > 0 && count > 1 && !reduced && !paused && !hovered && !focused && inView;
+  useEffect(function () {
+    return observe(local.current, setInView);
+  }, []);
+  useEffect(function () {
+    if (!playing) return undefined;
+    var timer = setTimeout(function () {
+      return setIndex(function (i) {
+        return (i + 1) % count;
+      });
+    }, autoplay);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [playing, index, autoplay, count]);
+  if (!count) return null;
+  var current = items[Math.min(index, count - 1)];
+  var tabs = items.map(function (_, i) {
+    return "".concat(id, "-tab-").concat(i);
+  });
+  var onTabKey = function onTabKey(event) {
+    var map = {
+      ArrowRight: index + 1,
+      ArrowDown: index + 1,
+      ArrowLeft: index - 1,
+      ArrowUp: index - 1,
+      Home: 0,
+      End: count - 1
+    };
+    if (!(event.key in map)) return;
+    event.preventDefault();
+    var next = (map[event.key] + count) % count;
+    setIndex(next);
+    var el = document.getElementById(tabs[next]);
+    if (el) el.focus();
+  };
+  return jsxs("section", _objectSpread2(_objectSpread2({
+    ref: setRef,
+    "aria-roledescription": "carousel",
+    "aria-label": label,
+    className: cn("grid items-center gap-10 md:grid-cols-2", className),
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    },
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur(e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+    }
+  }, rest), {}, {
+    children: [grid ? jsx("div", {
+      className: "grid aspect-square grid-cols-3 gap-3",
+      children: Array.from({
+        length: 9
+      }, function (_, tile) {
+        var centre = tile === 4;
+        var other = items[(index + tile + 1) % count];
+        return jsx("div", {
+          className: cn("flex items-center justify-center rounded-card border border-line", centre ? "bg-surface shadow-md dark:bg-background" : "bg-background"),
+          children: centre ? jsx("span", {
+            className: "flex w-full justify-center animate-fade-in motion-reduce:animate-none",
+            children: jsx(Logo, {
+              logo: current.logo
+            })
+          }, index) : tile % 2 === 0 ? jsx("span", {
+            className: "flex w-full justify-center opacity-30 grayscale",
+            "aria-hidden": "true",
+            children: jsx(Logo, {
+              logo: other.logo,
+              decorative: true
+            })
+          }) : null
+        }, tile);
+      })
+    }) : null, jsxs("div", {
+      className: "flex flex-col gap-6",
+      children: [jsxs("figure", {
+        id: "".concat(id, "-panel"),
+        role: "tabpanel",
+        "aria-labelledby": tabs[index],
+        "aria-live": playing ? "off" : "polite",
+        className: "flex flex-col gap-4 animate-fade-in motion-reduce:animate-none",
+        children: [jsx("blockquote", {
+          className: "text-section-title font-medium leading-snug text-foreground",
+          children: current.quote
+        }), jsxs("figcaption", {
+          className: "text-body text-muted",
+          children: [jsx("span", {
+            className: "font-semibold text-foreground",
+            children: current.name
+          }), current.role ? jsxs("span", {
+            children: [", ", current.role]
+          }) : null]
+        })]
+      }, index), count > 1 ? jsxs("div", {
+        className: "flex items-center gap-4",
+        children: [jsx("div", {
+          role: "tablist",
+          "aria-label": "".concat(label, ": choose a quote"),
+          className: "flex gap-2",
+          onKeyDown: onTabKey,
+          children: items.map(function (item, i) {
+            var _item$id;
+            return jsx("button", {
+              id: tabs[i],
+              type: "button",
+              role: "tab",
+              "aria-selected": i === index,
+              "aria-controls": "".concat(id, "-panel"),
+              tabIndex: i === index ? 0 : -1,
+              "aria-label": "Quote ".concat(i + 1, " of ").concat(count),
+              onClick: function onClick() {
+                return setIndex(i);
+              },
+              className: cn("h-2.5 rounded-pill transition-[width,background-color] duration-base motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2", i === index ? "w-6 bg-primary-600" : "w-2.5 bg-line hover:bg-muted/60")
+            }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : i);
+          })
+        }), autoplay > 0 && !reduced ? jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setPaused(function (p) {
+              return !p;
+            });
+          },
+          className: "rounded-pill px-2 py-1 text-caption text-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+          children: paused ? "Play" : "Pause"
+        }) : null]
+      }) : null]
+    })]
+  }));
+});
+TestimonialSpotlight.displayName = "TestimonialSpotlight";
+
+export { TestimonialSpotlight as default };