@zentauri-ui/zentauri-components 1.7.8 → 1.8.0

package/src/ui/marquee/marquee.test.tsx

@@ -0,0 +1,138 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Marquee } from "./marquee";
+
+describe("Marquee", () => {
+  it("exposes a display name", () => {
+    expect(Marquee.displayName).toBe("Marquee");
+  });
+
+  it("renders children into duplicated marquee groups", () => {
+    render(
+      <Marquee>
+        <span>Acme</span>
+      </Marquee>,
+    );
+
+    expect(document.querySelector('[data-slot="marquee"]')).toBeTruthy();
+    expect(document.querySelector('[data-slot="marquee-track"]')).toBeTruthy();
+    expect(screen.getAllByText("Acme")).toHaveLength(2);
+
+    const groups = document.querySelectorAll(
+      '[data-slot="marquee-item-group"]',
+    );
+    expect(groups[1]).toHaveAttribute("aria-hidden", "true");
+    expect(groups[1]).toHaveAttribute("inert");
+  });
+
+  it("applies horizontal metadata by default", () => {
+    render(
+      <Marquee data-testid="marquee">
+        <span>Default direction</span>
+      </Marquee>,
+    );
+
+    const marquee = screen.getByTestId("marquee");
+    expect(marquee).toHaveAttribute("data-orientation", "horizontal");
+    expect(marquee).toHaveAttribute("data-direction", "left");
+    expect(marquee.className).toContain("w-full");
+  });
+
+  it("applies vertical metadata and down direction", () => {
+    render(
+      <Marquee orientation="vertical" direction="down" data-testid="marquee">
+        <span>Vertical direction</span>
+      </Marquee>,
+    );
+
+    const marquee = screen.getByTestId("marquee");
+    const track = document.querySelector('[data-slot="marquee-track"]');
+    expect(marquee).toHaveAttribute("data-orientation", "vertical");
+    expect(marquee).toHaveAttribute("data-direction", "down");
+    expect(track?.className).toContain("[animation-direction:reverse]");
+  });
+
+  it("infers vertical orientation from up or down directions", () => {
+    render(
+      <Marquee direction="up" data-testid="marquee">
+        <span>Inferred vertical</span>
+      </Marquee>,
+    );
+
+    expect(screen.getByTestId("marquee")).toHaveAttribute(
+      "data-orientation",
+      "vertical",
+    );
+  });
+
+  it("maps speed to track animation styles and gap to a CSS custom property", () => {
+    render(
+      <Marquee speed={42} gap={24} data-testid="marquee">
+        <span>Timing</span>
+      </Marquee>,
+    );
+
+    const marquee = screen.getByTestId("marquee");
+    expect(marquee).toHaveStyle({
+      "--zui-marquee-gap": "24px",
+    });
+
+    expect(document.querySelector('[data-slot="marquee-track"]')).toHaveStyle({
+      animationDuration: "42s",
+      animationName: "zui-marquee-x",
+    });
+  });
+
+  it("accepts string gap values", () => {
+    render(
+      <Marquee gap="2rem" data-testid="marquee">
+        <span>String gap</span>
+      </Marquee>,
+    );
+
+    expect(screen.getByTestId("marquee")).toHaveStyle({
+      "--zui-marquee-gap": "2rem",
+    });
+  });
+
+  it("adds pause-on-hover animation control when requested", () => {
+    render(
+      <Marquee pauseOnHover>
+        <span>Pause</span>
+      </Marquee>,
+    );
+
+    expect(
+      document.querySelector('[data-slot="marquee-track"]')?.className,
+    ).toContain("group-hover/marquee:[animation-play-state:paused]");
+  });
+
+  it("applies appearance, size, fade, and custom classes", () => {
+    render(
+      <Marquee
+        appearance="sky"
+        className="rounded-2xl"
+        fade={false}
+        itemClassName="min-w-max"
+        size="lg"
+        trackClassName="tracking-wide"
+        data-testid="marquee"
+      >
+        <span>Variants</span>
+      </Marquee>,
+    );
+
+    const marquee = screen.getByTestId("marquee");
+    expect(marquee.className).toContain("rounded-2xl");
+    expect(marquee.className).toContain("p-4");
+    expect(marquee.className).toContain("--zui-marquee-sky-border");
+    expect(marquee.className).not.toContain("mask-image");
+    expect(
+      document.querySelector('[data-slot="marquee-track"]')?.className,
+    ).toContain("tracking-wide");
+    expect(
+      document.querySelector('[data-slot="marquee-item-group"]')?.className,
+    ).toContain("min-w-max");
+  });
+});

package/src/ui/marquee/marquee.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import type { CSSProperties } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { MarqueeProps } from "./types";
+import { marqueeVariants } from "./variants";
+
+const marqueeKeyframes = `@keyframes zui-marquee-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--zui-marquee-gap)/2),0,0)}}@keyframes zui-marquee-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - var(--zui-marquee-gap)/2),0)}}`;
+
+function toCssLength(value: number | string | undefined) {
+  if (value === undefined) {
+    return undefined;
+  }
+  return typeof value === "number" ? `${value}px` : value;
+}
+
+export function Marquee(props: MarqueeProps) {
+  const {
+    appearance,
+    children,
+    className,
+    direction,
+    fade,
+    gap,
+    itemClassName,
+    orientation,
+    pauseOnHover = false,
+    ref,
+    size,
+    speed = 30,
+    style,
+    trackClassName,
+    ...rest
+  } = props;
+
+  const resolvedOrientation =
+    orientation ??
+    (direction === "up" || direction === "down" ? "vertical" : "horizontal");
+  const resolvedDirection =
+    direction ?? (resolvedOrientation === "vertical" ? "up" : "left");
+  const isReverse =
+    resolvedDirection === "right" || resolvedDirection === "down";
+  const animationName =
+    resolvedOrientation === "vertical" ? "zui-marquee-y" : "zui-marquee-x";
+  const marqueeStyle = {
+    ...(gap !== undefined ? { "--zui-marquee-gap": toCssLength(gap) } : null),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      ref={ref}
+      data-direction={resolvedDirection}
+      data-orientation={resolvedOrientation}
+      data-slot="marquee"
+      className={cn(
+        marqueeVariants({
+          appearance,
+          fade,
+          orientation: resolvedOrientation,
+          size,
+        }),
+        className,
+      )}
+      style={marqueeStyle}
+      {...rest}
+    >
+      <style>{marqueeKeyframes}</style>
+      <div
+        data-slot="marquee-track"
+        className={cn(
+          "flex shrink-0 gap-[var(--zui-marquee-gap)] will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]",
+          resolvedOrientation === "vertical" ? "flex-col" : "w-max flex-row",
+          pauseOnHover && "group-hover/marquee:[animation-play-state:paused]",
+          isReverse && "[animation-direction:reverse]",
+          trackClassName,
+        )}
+        style={
+          {
+            animationDuration: `${speed}s`,
+            animationName,
+          } as CSSProperties
+        }
+      >
+        <div
+          data-slot="marquee-item-group"
+          className={cn(
+            "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
+            resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
+            itemClassName,
+          )}
+        >
+          {children}
+        </div>
+        <div
+          aria-hidden="true"
+          inert
+          data-slot="marquee-item-group"
+          className={cn(
+            "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
+            resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
+            itemClassName,
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Marquee.displayName = "Marquee";

package/src/ui/marquee/types.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type { marqueeVariants } from "./variants";
+
+export type MarqueeVariantProps = VariantProps<typeof marqueeVariants>;
+
+export type MarqueeDirection = "left" | "right" | "up" | "down";
+
+export type MarqueeProps = MarqueeVariantProps &
+  Omit<ComponentPropsWithRef<"div">, "children"> & {
+    children: ReactNode;
+    direction?: MarqueeDirection;
+    gap?: number | string;
+    pauseOnHover?: boolean;
+    speed?: number;
+    trackClassName?: string;
+    itemClassName?: string;
+  };

package/src/ui/marquee/variants.ts

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiMarqueeAppearances,
+  zuiMarqueeBase,
+  zuiMarqueeFade,
+  zuiMarqueeOrientations,
+  zuiMarqueeSizes,
+} from "../../design-system/marquee";
+
+export const marqueeVariants = cva(zuiMarqueeBase, {
+  variants: {
+    appearance: zuiMarqueeAppearances,
+    fade: zuiMarqueeFade,
+    orientation: zuiMarqueeOrientations,
+    size: zuiMarqueeSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    fade: true,
+    orientation: "horizontal",
+    size: "md",
+  },
+});