@quikturn/logos-react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,665 @@
+import React, { createContext, useRef, useState, useMemo, useEffect, useCallback, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { logoUrl, BASE_URL } from '@quikturn/logos';
+
+// src/context.tsx
+var QuikturnContext = createContext(null);
+function useQuikturnContext() {
+  return useContext(QuikturnContext);
+}
+function QuikturnProvider({
+  token,
+  baseUrl,
+  children
+}) {
+  return /* @__PURE__ */ jsx(QuikturnContext.Provider, { value: { token, baseUrl }, children });
+}
+function useLogoUrl(domain, options) {
+  const ctx = useQuikturnContext();
+  const token = options?.token ?? ctx?.token;
+  const baseUrl = options?.baseUrl ?? ctx?.baseUrl;
+  return useMemo(
+    () => logoUrl(domain, {
+      token,
+      baseUrl,
+      size: options?.size,
+      format: options?.format,
+      greyscale: options?.greyscale,
+      theme: options?.theme
+    }),
+    [domain, token, baseUrl, options?.size, options?.format, options?.greyscale, options?.theme]
+  );
+}
+var fired = /* @__PURE__ */ new Set();
+function fireBeacon(token) {
+  if (typeof window === "undefined") return;
+  if (!token || token.startsWith("sk_")) return;
+  if (fired.has(token)) return;
+  fired.add(token);
+  const img = new Image();
+  img.src = `${BASE_URL}/_beacon?token=${token}&page=${encodeURIComponent(location.href)}`;
+}
+function QuikturnLogo({
+  domain,
+  token,
+  baseUrl,
+  size,
+  format,
+  greyscale,
+  theme,
+  alt,
+  href,
+  className,
+  style,
+  loading = "lazy",
+  onError,
+  onLoad
+}) {
+  const ctx = useQuikturnContext();
+  const effectiveToken = token ?? ctx?.token ?? "";
+  const effectiveBaseUrl = baseUrl ?? ctx?.baseUrl;
+  const src = useMemo(
+    () => logoUrl(domain, {
+      token: effectiveToken || void 0,
+      size,
+      format,
+      greyscale,
+      theme,
+      baseUrl: effectiveBaseUrl
+    }),
+    [domain, effectiveToken, effectiveBaseUrl, size, format, greyscale, theme]
+  );
+  useEffect(() => {
+    if (effectiveToken) fireBeacon(effectiveToken);
+  }, [effectiveToken]);
+  const imgEl = /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: alt ?? `${domain} logo`,
+      loading,
+      onError,
+      onLoad
+    }
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className,
+        style,
+        children: imgEl
+      }
+    );
+  }
+  if (className || style) {
+    return /* @__PURE__ */ jsx("span", { className, style, children: imgEl });
+  }
+  return imgEl;
+}
+var ANIMATION_CONFIG = {
+  SMOOTH_TAU: 0.25,
+  MIN_COPIES: 2,
+  COPY_HEADROOM: 2
+};
+function useResizeObserver(callback, refs, deps) {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!window.ResizeObserver) {
+      const handle = () => callback();
+      window.addEventListener("resize", handle);
+      callback();
+      return () => window.removeEventListener("resize", handle);
+    }
+    const observers = refs.map((ref) => {
+      if (!ref.current) return null;
+      const observer = new ResizeObserver(callback);
+      observer.observe(ref.current);
+      return observer;
+    });
+    callback();
+    return () => {
+      observers.forEach((o) => o?.disconnect());
+    };
+  }, deps);
+}
+function useImageLoader(listRef, onLoad, deps) {
+  useEffect(() => {
+    const images = listRef.current?.querySelectorAll("img") ?? [];
+    if (images.length === 0) {
+      onLoad();
+      return;
+    }
+    let remaining = images.length;
+    const done = () => {
+      remaining -= 1;
+      if (remaining === 0) onLoad();
+    };
+    images.forEach((img) => {
+      const el = img;
+      if (el.complete) {
+        done();
+      } else {
+        el.addEventListener("load", done, { once: true });
+        el.addEventListener("error", done, { once: true });
+      }
+    });
+    return () => {
+      images.forEach((img) => {
+        img.removeEventListener("load", done);
+        img.removeEventListener("error", done);
+      });
+    };
+  }, deps);
+}
+function useAnimationLoop(trackRef, targetVelocity, seqWidth, seqHeight, isHovered, hoverSpeed, isVertical) {
+  const rafRef = useRef(null);
+  const lastTsRef = useRef(null);
+  const offsetRef = useRef(0);
+  const velocityRef = useRef(0);
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const prefersReduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const seqSize = isVertical ? seqHeight : seqWidth;
+    if (seqSize > 0) {
+      offsetRef.current = (offsetRef.current % seqSize + seqSize) % seqSize;
+      track.style.transform = isVertical ? `translate3d(0, ${-offsetRef.current}px, 0)` : `translate3d(${-offsetRef.current}px, 0, 0)`;
+    }
+    if (prefersReduced) {
+      track.style.transform = "translate3d(0, 0, 0)";
+      return () => {
+        lastTsRef.current = null;
+      };
+    }
+    const animate = (ts) => {
+      if (lastTsRef.current === null) lastTsRef.current = ts;
+      const dt = Math.max(0, ts - lastTsRef.current) / 1e3;
+      lastTsRef.current = ts;
+      const target = isHovered && hoverSpeed !== void 0 ? hoverSpeed : targetVelocity;
+      const ease = 1 - Math.exp(-dt / ANIMATION_CONFIG.SMOOTH_TAU);
+      velocityRef.current += (target - velocityRef.current) * ease;
+      if (seqSize > 0) {
+        let next = offsetRef.current + velocityRef.current * dt;
+        next = (next % seqSize + seqSize) % seqSize;
+        offsetRef.current = next;
+        track.style.transform = isVertical ? `translate3d(0, ${-offsetRef.current}px, 0)` : `translate3d(${-offsetRef.current}px, 0, 0)`;
+      }
+      rafRef.current = requestAnimationFrame(animate);
+    };
+    rafRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      lastTsRef.current = null;
+    };
+  }, [targetVelocity, seqWidth, seqHeight, isHovered, hoverSpeed, isVertical]);
+}
+function toCssLength(value) {
+  return typeof value === "number" ? `${value}px` : value ?? void 0;
+}
+function FadeOverlays({
+  isVertical,
+  fadeColor = "#ffffff"
+}) {
+  const base = {
+    position: "absolute",
+    pointerEvents: "none",
+    zIndex: 1
+  };
+  if (isVertical) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          "data-testid": "fade-overlay",
+          style: {
+            ...base,
+            top: 0,
+            left: 0,
+            right: 0,
+            height: "clamp(24px, 8%, 120px)",
+            background: `linear-gradient(to bottom, ${fadeColor} 0%, transparent 100%)`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          "data-testid": "fade-overlay",
+          style: {
+            ...base,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "clamp(24px, 8%, 120px)",
+            background: `linear-gradient(to top, ${fadeColor} 0%, transparent 100%)`
+          }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        "data-testid": "fade-overlay",
+        style: {
+          ...base,
+          top: 0,
+          bottom: 0,
+          left: 0,
+          width: "clamp(24px, 8%, 120px)",
+          background: `linear-gradient(to right, ${fadeColor} 0%, transparent 100%)`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        "data-testid": "fade-overlay",
+        style: {
+          ...base,
+          top: 0,
+          bottom: 0,
+          right: 0,
+          width: "clamp(24px, 8%, 120px)",
+          background: `linear-gradient(to left, ${fadeColor} 0%, transparent 100%)`
+        }
+      }
+    )
+  ] });
+}
+function DefaultLogoItem({
+  logo,
+  logoHeight,
+  scaleOnHover
+}) {
+  const [hovered, setHovered] = useState(false);
+  const imgStyle = {
+    height: `${logoHeight}px`,
+    width: "auto",
+    display: "block",
+    objectFit: "contain",
+    userSelect: "none",
+    pointerEvents: "none",
+    transform: scaleOnHover && hovered ? "scale(1.2)" : void 0,
+    transition: scaleOnHover ? "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)" : void 0
+  };
+  const handlers = scaleOnHover ? {
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false)
+  } : {};
+  const img = /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: logo.url,
+      alt: logo.alt,
+      loading: "lazy",
+      decoding: "async",
+      draggable: false,
+      style: imgStyle
+    }
+  );
+  if (logo.href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: logo.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        "aria-label": logo.alt,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          textDecoration: "none"
+        },
+        ...handlers,
+        children: img
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: { display: "inline-flex", alignItems: "center" },
+      ...handlers,
+      children: img
+    }
+  );
+}
+var QuikturnLogoCarousel = React.memo(
+  function QuikturnLogoCarousel2({
+    domains,
+    logos,
+    token,
+    baseUrl,
+    speed = 120,
+    direction = "left",
+    pauseOnHover,
+    hoverSpeed,
+    logoHeight = 28,
+    gap = 32,
+    width = "100%",
+    fadeOut = false,
+    fadeOutColor,
+    scaleOnHover = false,
+    logoSize,
+    logoFormat,
+    logoGreyscale,
+    logoTheme,
+    renderItem,
+    className,
+    style,
+    ariaLabel = "Company logos"
+  }) {
+    const ctx = useQuikturnContext();
+    const effectiveToken = token ?? ctx?.token ?? "";
+    const effectiveBaseUrl = baseUrl ?? ctx?.baseUrl;
+    const containerRef = useRef(null);
+    const trackRef = useRef(null);
+    const seqRef = useRef(null);
+    const [seqWidth, setSeqWidth] = useState(0);
+    const [seqHeight, setSeqHeight] = useState(0);
+    const [copyCount, setCopyCount] = useState(ANIMATION_CONFIG.MIN_COPIES);
+    const [isHovered, setIsHovered] = useState(false);
+    const isVertical = direction === "up" || direction === "down";
+    const resolvedLogos = useMemo(() => {
+      const items = logos ?? (domains ?? []).map((d) => ({ domain: d }));
+      return items.map((item) => ({
+        domain: item.domain,
+        alt: item.alt ?? `${item.domain} logo`,
+        href: item.href,
+        url: logoUrl(item.domain, {
+          token: effectiveToken || void 0,
+          size: item.size ?? logoSize,
+          format: item.format ?? logoFormat,
+          greyscale: item.greyscale ?? logoGreyscale,
+          theme: item.theme ?? logoTheme,
+          baseUrl: effectiveBaseUrl
+        })
+      }));
+    }, [
+      domains,
+      logos,
+      effectiveToken,
+      effectiveBaseUrl,
+      logoSize,
+      logoFormat,
+      logoGreyscale,
+      logoTheme
+    ]);
+    useEffect(() => {
+      if (effectiveToken) fireBeacon(effectiveToken);
+    }, [effectiveToken]);
+    const effectiveHoverSpeed = useMemo(() => {
+      if (hoverSpeed !== void 0) return hoverSpeed;
+      if (pauseOnHover === true) return 0;
+      return void 0;
+    }, [hoverSpeed, pauseOnHover]);
+    const targetVelocity = useMemo(() => {
+      const mag = Math.abs(speed);
+      const dirMul = isVertical ? direction === "up" ? 1 : -1 : direction === "left" ? 1 : -1;
+      const signMul = speed < 0 ? -1 : 1;
+      return mag * dirMul * signMul;
+    }, [speed, direction, isVertical]);
+    const updateDimensions = useCallback(() => {
+      const containerEl = containerRef.current;
+      const seqRect = seqRef.current?.getBoundingClientRect();
+      const sw = seqRect?.width ?? 0;
+      const sh = seqRect?.height ?? 0;
+      if (isVertical) {
+        const parentH = containerEl?.parentElement?.clientHeight ?? 0;
+        if (containerEl && parentH > 0) {
+          containerEl.style.height = `${Math.ceil(parentH)}px`;
+        }
+        if (sh > 0) {
+          setSeqHeight(Math.ceil(sh));
+          const viewport = containerEl?.clientHeight ?? parentH ?? sh;
+          const copies = Math.ceil(viewport / sh) + ANIMATION_CONFIG.COPY_HEADROOM;
+          setCopyCount(Math.max(ANIMATION_CONFIG.MIN_COPIES, copies));
+        }
+      } else if (sw > 0) {
+        setSeqWidth(Math.ceil(sw));
+        const containerW = containerEl?.clientWidth ?? 0;
+        const copies = Math.ceil(containerW / sw) + ANIMATION_CONFIG.COPY_HEADROOM;
+        setCopyCount(Math.max(ANIMATION_CONFIG.MIN_COPIES, copies));
+      }
+    }, [isVertical]);
+    useResizeObserver(updateDimensions, [containerRef, seqRef], [
+      resolvedLogos,
+      gap,
+      logoHeight,
+      isVertical
+    ]);
+    useImageLoader(seqRef, updateDimensions, [
+      resolvedLogos,
+      gap,
+      logoHeight,
+      isVertical
+    ]);
+    useAnimationLoop(
+      trackRef,
+      targetVelocity,
+      seqWidth,
+      seqHeight,
+      isHovered,
+      effectiveHoverSpeed,
+      isVertical
+    );
+    const handleMouseEnter = useCallback(() => {
+      if (effectiveHoverSpeed !== void 0) setIsHovered(true);
+    }, [effectiveHoverSpeed]);
+    const handleMouseLeave = useCallback(() => {
+      if (effectiveHoverSpeed !== void 0) setIsHovered(false);
+    }, [effectiveHoverSpeed]);
+    const logoLists = useMemo(
+      () => Array.from({ length: copyCount }, (_, ci) => /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ref: ci === 0 ? seqRef : void 0,
+          role: "list",
+          "aria-hidden": ci > 0 ? true : void 0,
+          style: {
+            display: "flex",
+            flexDirection: isVertical ? "column" : "row",
+            alignItems: "center",
+            listStyle: "none",
+            margin: 0,
+            padding: 0
+          },
+          children: resolvedLogos.map((logo, i) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              role: "listitem",
+              style: {
+                flex: "none",
+                ...isVertical ? { marginBottom: `${gap}px` } : { marginRight: `${gap}px` }
+              },
+              children: renderItem ? renderItem(logo, i) : /* @__PURE__ */ jsx(
+                DefaultLogoItem,
+                {
+                  logo,
+                  logoHeight,
+                  scaleOnHover
+                }
+              )
+            },
+            `${ci}-${i}`
+          ))
+        },
+        ci
+      )),
+      [
+        copyCount,
+        resolvedLogos,
+        isVertical,
+        gap,
+        logoHeight,
+        scaleOnHover,
+        renderItem
+      ]
+    );
+    const cssWidth = toCssLength(width);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        role: "region",
+        "aria-label": ariaLabel,
+        className,
+        style: {
+          position: "relative",
+          overflow: "hidden",
+          width: isVertical ? void 0 : cssWidth ?? "100%",
+          height: isVertical ? "100%" : void 0,
+          display: isVertical ? "inline-block" : void 0,
+          ...style
+        },
+        children: [
+          fadeOut && /* @__PURE__ */ jsx(FadeOverlays, { isVertical, fadeColor: fadeOutColor }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: trackRef,
+              style: {
+                display: "flex",
+                flexDirection: isVertical ? "column" : "row",
+                width: isVertical ? "100%" : "max-content",
+                willChange: "transform",
+                userSelect: "none",
+                position: "relative",
+                zIndex: 0
+              },
+              onMouseEnter: handleMouseEnter,
+              onMouseLeave: handleMouseLeave,
+              children: logoLists
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function QuikturnLogoGrid({
+  domains,
+  logos,
+  token,
+  baseUrl,
+  columns = 4,
+  gap = 24,
+  logoSize,
+  logoFormat,
+  logoGreyscale,
+  logoTheme,
+  renderItem,
+  className,
+  style,
+  ariaLabel = "Company logos"
+}) {
+  const ctx = useQuikturnContext();
+  const effectiveToken = token ?? ctx?.token ?? "";
+  const effectiveBaseUrl = baseUrl ?? ctx?.baseUrl;
+  const resolvedLogos = useMemo(() => {
+    const items = logos ?? (domains ?? []).map((d) => ({ domain: d }));
+    return items.map((item) => ({
+      domain: item.domain,
+      alt: item.alt ?? `${item.domain} logo`,
+      href: item.href,
+      url: logoUrl(item.domain, {
+        token: effectiveToken || void 0,
+        size: item.size ?? logoSize,
+        format: item.format ?? logoFormat,
+        greyscale: item.greyscale ?? logoGreyscale,
+        theme: item.theme ?? logoTheme,
+        baseUrl: effectiveBaseUrl
+      })
+    }));
+  }, [
+    domains,
+    logos,
+    effectiveToken,
+    effectiveBaseUrl,
+    logoSize,
+    logoFormat,
+    logoGreyscale,
+    logoTheme
+  ]);
+  useEffect(() => {
+    if (effectiveToken) fireBeacon(effectiveToken);
+  }, [effectiveToken]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel,
+      className,
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap: `${gap}px`,
+        alignItems: "center",
+        justifyItems: "center",
+        ...style
+      },
+      children: resolvedLogos.map(
+        (logo, i) => renderItem ? /* @__PURE__ */ jsx(React.Fragment, { children: renderItem(logo, i) }, logo.domain) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: logo.href ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: logo.href,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": logo.alt,
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: logo.url,
+                    alt: logo.alt,
+                    loading: "lazy",
+                    style: {
+                      maxWidth: "100%",
+                      height: "auto",
+                      display: "block"
+                    }
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: logo.url,
+                alt: logo.alt,
+                loading: "lazy",
+                style: {
+                  maxWidth: "100%",
+                  height: "auto",
+                  display: "block"
+                }
+              }
+            )
+          },
+          logo.domain
+        )
+      )
+    }
+  );
+}
+
+export { QuikturnLogo, QuikturnLogoCarousel, QuikturnLogoGrid, QuikturnProvider, useLogoUrl };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@quikturn/logos-react",
+  "version": "1.0.0",
+  "description": "React components for the Quikturn Logos API — QuikturnLogo, LogoCarousel, LogoGrid",
+  "license": "MIT",
+  "author": "Quikturn",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@quikturn/logos": ">=0.1.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@quikturn/logos": "workspace:*",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^28.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "semantic-release": "^25.0.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
+}