@theguild/components 9.3.0-alpha-20250130185600-40bf89127bd373fa4c03b808908da89ac759d2e7 → 9.3.0-alpha-20250131164907-dbad02c7f607e631c4c6d1b14c288380b6242ce2

package/dist/components/index.d.mts

@@ -32,6 +32,7 @@ export { ContactButton, ContactButtonProps, ContactTextLink, ContactTextLinkProp
 export { Giscus } from './giscus.mjs';
 export { VersionDropdown, VersionDropdownProps } from './version-dropdown.mjs';
 export { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from './dropdown.mjs';
+export { Marquee, MarqueeProps, MarqueeRows, MarqueeRowsProps } from './marquee/index.mjs';
 export { FrequentlyAskedQuestions } from './faq/index.mjs';
 export { ComparisonTable } from './comparison-table/index.mjs';
 export { HiveLayoutConfig } from './hive-layout-config.mjs';

package/dist/components/index.js

@@ -32,6 +32,7 @@ import { Giscus } from "./giscus";
 export * from "./product-card";
 export * from "./version-dropdown";
 export * from "./dropdown";
+export * from "./marquee";
 import { FrequentlyAskedQuestions } from "./faq";
 import { ComparisonTable } from "./comparison-table";
 import { HiveLayoutConfig } from "./hive-layout-config";

package/dist/components/marquee/index.d.mts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import react__default, { ReactNode, ReactElement } from 'react';
+
+declare const PresetSpeedToMs: {
+    fast: number;
+    normal: number;
+    slow: number;
+};
+interface MarqueeProps extends react__default.HTMLAttributes<HTMLDivElement> {
+    direction?: 'left' | 'right';
+    speed?: keyof typeof PresetSpeedToMs | number;
+    pauseOnHover?: boolean;
+    /**
+     * Seconds to stop the animation
+     */
+    pauseDurationSeconds?: number;
+    children: ReactNode;
+}
+declare function Marquee({ direction, speed, pauseOnHover, className, children, pauseDurationSeconds, ...rest }: MarqueeProps): react_jsx_runtime.JSX.Element;
+interface MarqueeRowsProps extends react__default.HTMLAttributes<HTMLElement>, Pick<MarqueeProps, 'pauseOnHover' | 'speed'> {
+    rows: number;
+    children: ReactElement[];
+}
+declare function MarqueeRows({ children, rows, pauseOnHover, speed, className, ...rest }: MarqueeRowsProps): react_jsx_runtime.JSX.Element;
+declare namespace MarqueeRows {
+    var Rows: typeof MarqueeRows;
+}
+
+export { Marquee, type MarqueeProps, MarqueeRows, type MarqueeRowsProps };

package/dist/components/marquee/index.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@theguild/components";
+import { useTweenPlaybackRate } from "./use-tween-playback-rate";
+const PresetSpeedToMs = {
+  fast: 2e4,
+  normal: 4e4,
+  slow: 6e4
+};
+function Marquee({
+  direction = "left",
+  speed = "normal",
+  pauseOnHover = false,
+  className,
+  children,
+  pauseDurationSeconds = 1,
+  ...rest
+}) {
+  const animationDuration = typeof speed === "number" ? speed : PresetSpeedToMs[speed];
+  const tweenPlaybackRate = useTweenPlaybackRate();
+  const STEP = 1 / (pauseDurationSeconds * 1e3);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "[mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "ul",
+          {
+            className: cn(
+              "flex w-max animate-[marquee_var(--animation-duration)_var(--animation-direction)_linear_infinite] gap-2 py-1"
+            ),
+            style: {
+              "--animation-duration": `${animationDuration}ms`,
+              "--animation-direction": direction === "left" ? "forwards" : "reverse"
+              // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+            },
+            onMouseEnter: pauseOnHover ? (event) => {
+              const animation = event.currentTarget.getAnimations()[0];
+              if (animation) tweenPlaybackRate(animation, -STEP);
+            } : void 0,
+            onMouseLeave: pauseOnHover ? (event) => {
+              const animation = event.currentTarget.getAnimations()[0];
+              if (animation) tweenPlaybackRate(animation, STEP);
+            } : void 0,
+            children: [
+              children,
+              children
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("style", {
+          href: "Marquee-keyframes",
+          /* css */
+          children: `
+          @keyframes marquee {
+            to {
+              translate: calc(-50% - .5rem);
+            }
+          }
+        `
+        })
+      ]
+    }
+  );
+}
+function MarqueeRows({
+  children,
+  rows,
+  pauseOnHover,
+  speed,
+  className,
+  ...rest
+}) {
+  const chunkSize = Math.ceil(children.length / rows);
+  const chunks = [];
+  for (let i = 0; i < rows; i++) {
+    chunks.push(children.slice(i * chunkSize, (i + 1) * chunkSize));
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden", className), ...rest, children: chunks.map((chunk, index) => /* @__PURE__ */ jsxs(
+    Marquee,
+    {
+      direction: index % 2 ? "left" : "right",
+      pauseOnHover,
+      speed,
+      children: [
+        chunk,
+        index === chunks.length - 1 && chunk
+      ]
+    },
+    index
+  )) });
+}
+MarqueeRows.Rows = MarqueeRows;
+export {
+  Marquee,
+  MarqueeRows
+};

package/dist/components/marquee/use-tween-playback-rate.d.mts

@@ -0,0 +1,3 @@
+declare function useTweenPlaybackRate(): (animation: Animation, step: number) => void;
+
+export { useTweenPlaybackRate };

package/dist/components/marquee/use-tween-playback-rate.js

@@ -0,0 +1,27 @@
+import { useRef } from "react";
+function useTweenPlaybackRate() {
+  const slowingHandle = useRef(null);
+  const resumingHandle = useRef(null);
+  const time = useRef(null);
+  return function tweenPlaybackRate(animation, step) {
+    const currentHandle = step > 0 ? resumingHandle : slowingHandle;
+    const oppositeHandle = step > 0 ? slowingHandle : resumingHandle;
+    if (oppositeHandle.current) {
+      cancelAnimationFrame(oppositeHandle.current);
+      oppositeHandle.current = time.current = null;
+    }
+    const now = performance.now();
+    if (time.current) {
+      const deltaTime = now - time.current;
+      const { playbackRate } = animation;
+      const newValue = Math.min(Math.max(playbackRate + step * deltaTime, 0), 1);
+      if (newValue === playbackRate) return;
+      animation.updatePlaybackRate(newValue);
+    }
+    time.current = now;
+    currentHandle.current = requestAnimationFrame(() => tweenPlaybackRate(animation, step));
+  };
+}
+export {
+  useTweenPlaybackRate
+};

package/dist/index.d.mts

@@ -35,6 +35,7 @@ export { ContactButton, ContactButtonProps, ContactTextLink, ContactTextLinkProp
 export { Giscus } from './components/giscus.mjs';
 export { VersionDropdown, VersionDropdownProps } from './components/version-dropdown.mjs';
 export { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from './components/dropdown.mjs';
+export { Marquee, MarqueeProps, MarqueeRows, MarqueeRowsProps } from './components/marquee/index.mjs';
 export { FrequentlyAskedQuestions } from './components/faq/index.mjs';
 export { ComparisonTable } from './components/comparison-table/index.mjs';
 export { HiveLayoutConfig } from './components/hive-layout-config.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.3.0-alpha-20250130185600-40bf89127bd373fa4c03b808908da89ac759d2e7",
+  "version": "9.3.0-alpha-20250131164907-dbad02c7f607e631c4c6d1b14c288380b6242ce2",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"