@particle-academy/react-fancy 4.11.0 → 4.12.0

package/README.md

@@ -130,6 +130,7 @@ npx vite build                      # Build demo app (verifies imports work)
 | Card | Container with Header, Body, Footer compound slots | [docs](docs/Card.md) |
 | Callout | Alert/info box with icon, color, and dismissible support | [docs](docs/Callout.md) |
 | Timeline | Stacked, alternating, and horizontal timeline with data-driven or compound API | [docs](docs/Timeline.md) |
+| Marquee | Auto-scrolling ticker strip with seamless wrap, px/s speed, fade edges, reduced-motion gate | [docs](docs/Marquee.md) |
 
 ### Overlay & Floating
 

package/dist/index.cjs

@@ -7703,6 +7703,120 @@ var TimeGrid = react.forwardRef(
   }
 );
 TimeGrid.displayName = "TimeGrid";
+function toLength(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Marquee = react.forwardRef(
+  ({
+    children,
+    items,
+    speed = 40,
+    duration,
+    direction = "left",
+    pauseOnHover = false,
+    paused = false,
+    gap = 40,
+    fade = true,
+    separator,
+    angle = 0,
+    decorative = true,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const rootRef = react.useRef(null);
+    const unitRef = react.useRef(null);
+    react.useImperativeHandle(ref, () => rootRef.current);
+    const [copies, setCopies] = react.useState(1);
+    const [measuredDuration, setMeasuredDuration] = react.useState(null);
+    react.useEffect(() => {
+      const root = rootRef.current;
+      const unit = unitRef.current;
+      if (!root || !unit || typeof ResizeObserver === "undefined") return;
+      const update = () => {
+        const unitWidth = unit.getBoundingClientRect().width;
+        const containerWidth = root.clientWidth;
+        if (unitWidth <= 0) return;
+        const nextCopies = Math.max(1, Math.ceil(containerWidth / unitWidth));
+        setCopies(nextCopies);
+        if (duration === void 0) {
+          setMeasuredDuration(unitWidth * nextCopies / Math.max(speed, 1));
+        }
+      };
+      update();
+      const observer = new ResizeObserver(update);
+      observer.observe(root);
+      observer.observe(unit);
+      return () => observer.disconnect();
+    }, [duration, speed]);
+    const loopSeconds = duration ?? measuredDuration ?? 40;
+    const itemNodes = items ?? react.Children.toArray(children);
+    const hasSeparator = separator !== void 0 && separator !== null;
+    const renderUnit = (duplicate, unitElRef) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: unitElRef,
+        className: "fancy-marquee__unit",
+        "aria-hidden": duplicate || void 0,
+        children: itemNodes.map((node, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fancy-marquee__item", "data-react-fancy-marquee-item": "", "data-index": i, children: node }),
+          hasSeparator && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "fancy-marquee__separator",
+              "data-react-fancy-marquee-separator": "",
+              "aria-hidden": "true",
+              children: separator
+            }
+          )
+        ] }, i))
+      }
+    );
+    const renderGroup = (duplicate) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fancy-marquee__group",
+        "data-react-fancy-marquee-group": "",
+        "aria-hidden": duplicate || void 0,
+        children: Array.from(
+          { length: copies },
+          (_, c) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderUnit(duplicate || c > 0, !duplicate && c === 0 ? unitRef : void 0) }, c)
+        )
+      }
+    );
+    const cssVars = {
+      "--fancy-marquee-duration": `${loopSeconds}s`,
+      "--fancy-marquee-gap": toLength(gap),
+      ...fade !== false && {
+        "--fancy-marquee-fade": fade === true ? "48px" : toLength(fade)
+      }
+    };
+    const angleStyle = angle ? { transform: `rotate(${angle}deg)`, width: "102%", marginLeft: "-1%" } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: rootRef,
+        "data-react-fancy-marquee": "",
+        "data-direction": direction,
+        "data-paused": paused ? "" : void 0,
+        "aria-hidden": decorative || void 0,
+        className: cn(
+          "fancy-marquee",
+          fade !== false && "fancy-marquee--fade",
+          pauseOnHover && "fancy-marquee--pause-hover",
+          className
+        ),
+        style: { ...cssVars, ...angleStyle, ...style },
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fancy-marquee__track", "data-react-fancy-marquee-track": "", children: [
+          renderGroup(false),
+          renderGroup(true)
+        ] })
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
 var Tooltip = react.forwardRef(
   function Tooltip2({ children, content, placement = "top", delay = 200, offset = 8, className }, _ref) {
     const [open, setOpen] = react.useState(false);
@@ -14891,6 +15005,7 @@ exports.Input = Input;
 exports.InputTag = InputTag;
 exports.Kanban = Kanban;
 exports.MagicWand = MagicWand;
+exports.Marquee = Marquee;
 exports.MediaViewer = MediaViewer;
 exports.Menu = Menu2;
 exports.MobileMenu = MobileMenu;