fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/animated-beam/AnimatedBeam.js

@@ -1,24 +1,83 @@
 "use client";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { cn } from "../../utils.js";
 import { useFancyId } from "../../internals/use-id.js";
 import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
 import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+/* empty css                  */
 function mulberry32(seed) {
-  let state = seed >>> 0;
+  let a = seed >>> 0;
   return () => {
-    state = state + 1831565813 >>> 0;
-    let t = state;
+    a = a + 1831565813 >>> 0;
+    let t = a;
     t = Math.imul(t ^ t >>> 15, t | 1);
     t ^= t + Math.imul(t ^ t >>> 7, t | 61);
     return ((t ^ t >>> 14) >>> 0) / 4294967296;
   };
 }
+function beamDuration(seed = 1) {
+  return mulberry32(seed)() * 3 + 4;
+}
+const PATH_LENGTH = 1e3;
+function packetLayers(tail, start, stop) {
+  const t = Math.min(0.9, Math.max(0.05, Number.isFinite(tail) ? tail : 0.35)) * PATH_LENGTH;
+  const spread = t * 0.07;
+  const mid = `color-mix(in oklab, ${start} 50%, ${stop})`;
+  const hot = `color-mix(in oklab, ${start} 45%, white)`;
+  const head = Math.max(12, t * 0.1);
+  const bands = [
+    ["stop", stop, t, spread * 3, 0.26],
+    ["mid", mid, t * 0.66, spread * 2, 0.34],
+    ["start", start, t * 0.38, spread, 0.46]
+  ];
+  const layers = [];
+  for (const [key, color, len, lag, opacity] of bands) {
+    for (const share of [1, 2 / 3, 1 / 3]) {
+      layers.push({ key, color, len: len * share, lag, opacity, width: 1 });
+    }
+  }
+  layers.push({ key: "head", color: start, len: head * 1.7, lag: 0, opacity: 1, width: 1.6 });
+  layers.push({ key: "head", color: hot, len: head, lag: 0, opacity: 1, width: 0.7, core: true });
+  return layers;
+}
+function glowLayers(tail, start, stop) {
+  const all = packetLayers(tail, start, stop);
+  const bands = all.filter((l, i) => l.key !== "head" && i % 3 === 0);
+  const head = all[all.length - 2];
+  return [
+    ...bands.map((l, i) => ({
+      ...l,
+      opacity: Math.min(1, l.opacity * (1.5 + i * 0.4)),
+      width: 2.5
+    })),
+    { ...head, len: head.len * 1.6, opacity: 1, width: 3.5 }
+  ];
+}
+function dashVars(layer) {
+  const o0 = layer.len + 4;
+  const o1 = layer.len - (PATH_LENGTH - layer.lag);
+  const o2 = -1004;
+  return {
+    "--_len": layer.len.toFixed(1),
+    "--_o0": o0.toFixed(1),
+    "--_o1": o1.toFixed(1),
+    "--_o2": o2.toFixed(1)
+  };
+}
 function resolveTarget(target) {
   if (!target) return null;
   return target instanceof HTMLElement ? target : target.current;
 }
+const EMPTY_GEOMETRY = {
+  pathD: "",
+  flowD: "",
+  ends: { x1: 0, y1: 0, x2: 0, y2: 0 },
+  landingRadius: 24,
+  width: 0,
+  height: 0
+};
 function AnimatedBeam({
   className = "",
   containerRef,
@@ -26,9 +85,9 @@ function AnimatedBeam({
   toRef,
   curvature = 0,
   reverse = false,
-  pathColor = "gray",
+  pathColor,
   pathWidth = 2,
-  pathOpacity = 0.2,
+  pathOpacity,
   gradientStartColor = "#FFAA40",
   gradientStopColor = "#9C40FF",
   delay = 0,
@@ -37,47 +96,62 @@ function AnimatedBeam({
   startYOffset = 0,
   endXOffset = 0,
   endYOffset = 0,
+  pulses = 1,
+  tail = 0.35,
+  glow = 0.6,
   seed = 1
 }) {
-  const id = useFancyId("beam");
-  const defaultDuration = useMemo(() => mulberry32(seed)() * 3 + 4, [seed]);
-  const resolvedDuration = duration ?? defaultDuration;
-  const [isVertical, setIsVertical] = useState(false);
-  const [isRightToLeft, setIsRightToLeft] = useState(false);
-  const [isBottomToTop, setIsBottomToTop] = useState(false);
-  const [pathD, setPathD] = useState("");
-  const [svgDimensions, setSvgDimensions] = useState({
-    width: 0,
-    height: 0
-  });
-  const x1 = (reverse ? !isRightToLeft : isRightToLeft) ? "90%; -10%;" : "10%; 110%;";
-  const x2 = (reverse ? !isRightToLeft : isRightToLeft) ? "100%; 0%;" : "0%; 100%;";
-  const y1 = (reverse ? !isBottomToTop : isBottomToTop) ? "90%; -10%;" : "10%; 110%;";
-  const y2 = (reverse ? !isBottomToTop : isBottomToTop) ? "100%; 0%;" : "0%; 100%;";
+  const uid = useFancyId("beam");
+  const id = uid;
+  const glowId = `${uid}-glow`;
+  const bloomId = `${uid}-bloom`;
+  const reduced = useReducedMotion();
+  const cycle = Number.isFinite(duration) && duration > 0 ? duration : beamDuration(seed);
+  const packetCount = Math.max(1, Math.min(12, Math.floor(Number.isFinite(pulses) ? pulses : 1)));
+  const packets = Array.from(
+    { length: packetCount },
+    (_, i) => +(delay + i * cycle / packetCount).toFixed(3)
+  );
+  const layers = packetLayers(tail, gradientStartColor, gradientStopColor);
+  const glows = glowLayers(tail, gradientStartColor, gradientStopColor);
+  const glowAmount = Math.min(1, Math.max(0, Number.isFinite(glow) ? glow : 0.6));
+  const midColor = `color-mix(in oklab, ${gradientStartColor} 50%, ${gradientStopColor})`;
+  const hotColor = `color-mix(in oklab, ${gradientStartColor} 45%, white)`;
+  const fibreOpacity = pathOpacity ?? (pathColor ? 0.2 : 1);
+  const fibreStyle = pathColor ? { stroke: pathColor } : void 0;
+  const [geo, setGeo] = useState(EMPTY_GEOMETRY);
+  const { pathD, flowD, ends, landingRadius } = geo;
+  const landing = reverse ? { x: ends.x1, y: ends.y1 } : { x: ends.x2, y: ends.y2 };
+  const launch = reverse ? { x: ends.x2, y: ends.y2 } : { x: ends.x1, y: ends.y1 };
   const updatePath = useEventCallback(() => {
     const container = resolveTarget(containerRef);
     const from = resolveTarget(fromRef);
     const to = resolveTarget(toRef);
-    if (container && from && to) {
-      const containerRect = container.getBoundingClientRect();
-      const rectA = from.getBoundingClientRect();
-      const rectB = to.getBoundingClientRect();
-      const svgWidth = containerRect.width;
-      const svgHeight = containerRect.height;
-      setSvgDimensions({ width: svgWidth, height: svgHeight });
-      const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
-      const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
-      const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
-      const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
-      setIsVertical(Math.abs(endY - startY) > Math.abs(endX - startX));
-      setIsRightToLeft(endX < startX);
-      setIsBottomToTop(endY < startY);
-      const controlY = startY - curvature;
-      const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
-      setPathD(d);
-    }
+    if (!(container && from && to)) return;
+    const containerRect = container.getBoundingClientRect();
+    const rectA = from.getBoundingClientRect();
+    const rectB = to.getBoundingClientRect();
+    const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
+    const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+    const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
+    const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+    const cx = (startX + endX) / 2;
+    const cy = startY - curvature;
+    const d = `M ${startX},${startY} Q ${cx},${cy} ${endX},${endY}`;
+    const target = reverse ? rectA : rectB;
+    const next = {
+      pathD: d,
+      flowD: reverse ? `M ${endX},${endY} Q ${cx},${cy} ${startX},${startY}` : d,
+      ends: { x1: startX, y1: startY, x2: endX, y2: endY },
+      landingRadius: Math.max(8, Math.max(target.width, target.height) / 2),
+      width: containerRect.width,
+      height: containerRect.height
+    };
+    setGeo(
+      (prev) => prev.pathD === next.pathD && prev.flowD === next.flowD && prev.landingRadius === next.landingRadius && prev.width === next.width && prev.height === next.height ? prev : next
+    );
   });
-  useIsomorphicLayoutEffect(() => {
+  useEffect(() => {
     const container = resolveTarget(containerRef);
     if (!container) return;
     const resizeObserver = new ResizeObserver(() => {
@@ -89,104 +163,205 @@ function AnimatedBeam({
       resizeObserver.disconnect();
     };
   }, [containerRef, updatePath]);
+  useIsomorphicLayoutEffect(() => {
+    updatePath();
+  }, [
+    containerRef,
+    fromRef,
+    toRef,
+    curvature,
+    reverse,
+    startXOffset,
+    startYOffset,
+    endXOffset,
+    endYOffset,
+    updatePath
+  ]);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
       fill: "none",
-      width: svgDimensions.width,
-      height: svgDimensions.height,
+      "aria-hidden": "true",
+      width: geo.width,
+      height: geo.height,
       xmlns: "http://www.w3.org/2000/svg",
       className: cn(
-        "pointer-events-none absolute top-0 left-0 transform-gpu stroke-2",
+        "animated-beam pointer-events-none absolute top-0 left-0 transform-gpu stroke-2",
         className
       ),
-      viewBox: `0 0 ${svgDimensions.width} ${svgDimensions.height}`,
+      viewBox: `0 0 ${geo.width} ${geo.height}`,
+      "data-duration": cycle.toFixed(3),
+      style: { "--_dur": `${cycle.toFixed(3)}s` },
       children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: pathD,
-            stroke: pathColor,
-            strokeWidth: pathWidth,
-            strokeOpacity: pathOpacity,
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: pathD,
-            strokeWidth: pathWidth,
-            stroke: `url(#${id})`,
-            strokeOpacity: "1",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id, gradientUnits: "userSpaceOnUse", x1: "0%", x2: "0%", y1: "0%", y2: "0%", children: [
-          /* @__PURE__ */ jsx("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
-          /* @__PURE__ */ jsx("stop", { stopColor: gradientStartColor }),
-          /* @__PURE__ */ jsx("stop", { offset: "32.5%", stopColor: gradientStopColor }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" }),
-          !isVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "animate",
-              {
-                attributeName: "x1",
-                values: x1,
-                dur: `${resolvedDuration}s`,
-                begin: `${delay}s`,
-                keyTimes: "0; 1",
-                keySplines: "0.16 1 0.3 1",
-                calcMode: "spline",
-                repeatCount: "indefinite"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "animate",
-              {
-                attributeName: "x2",
-                values: x2,
-                dur: `${resolvedDuration}s`,
-                begin: `${delay}s`,
-                keyTimes: "0; 1",
-                keySplines: "0.16 1 0.3 1",
-                calcMode: "spline",
-                repeatCount: "indefinite"
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id,
+              gradientUnits: "userSpaceOnUse",
+              x1: launch.x,
+              y1: launch.y,
+              x2: landing.x,
+              y2: landing.y,
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", style: { stopColor: hotColor }, stopOpacity: "0.9" }),
+                /* @__PURE__ */ jsx("stop", { offset: "30%", style: { stopColor: gradientStartColor } }),
+                /* @__PURE__ */ jsx("stop", { offset: "65%", style: { stopColor: midColor } }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", style: { stopColor: gradientStopColor } })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "filter",
+            {
+              id: glowId,
+              filterUnits: "userSpaceOnUse",
+              x: -40,
+              y: -40,
+              width: geo.width + 80,
+              height: geo.height + 80,
+              children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: 1.5 + 4 * glowAmount })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "filter",
+            {
+              id: bloomId,
+              filterUnits: "userSpaceOnUse",
+              x: -40,
+              y: -40,
+              width: geo.width + 80,
+              height: geo.height + 80,
+              children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: 5 + 6 * glowAmount })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("g", { className: "fibre", opacity: fibreOpacity, children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "fibre-sheath",
+              d: pathD,
+              strokeWidth: pathWidth + 2,
+              strokeLinecap: "round",
+              style: fibreStyle,
+              strokeOpacity: pathColor ? 0.5 : 1
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "fibre-core",
+              d: pathD,
+              strokeWidth: pathWidth,
+              strokeLinecap: "round",
+              style: fibreStyle
+            }
+          ),
+          !pathColor && /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "fibre-glint",
+              d: pathD,
+              strokeWidth: Math.max(0.5, pathWidth * 0.3),
+              strokeLinecap: "round"
+            }
+          )
+        ] }),
+        reduced ? (
+          /* Still frame: the fibre holds a soft gradient along its length. */
+          /* @__PURE__ */ jsxs("g", { className: "still", "data-still": "", children: [
             /* @__PURE__ */ jsx(
-              "animate",
+              "path",
               {
-                attributeName: "y1",
-                values: y1,
-                dur: `${resolvedDuration}s`,
-                begin: `${delay}s`,
-                keyTimes: "0; 1",
-                keySplines: "0.16 1 0.3 1",
-                calcMode: "spline",
-                repeatCount: "indefinite"
+                d: pathD,
+                stroke: `url(#${id})`,
+                strokeWidth: pathWidth * 2.5 + 3,
+                strokeLinecap: "round",
+                opacity: 0.35 * glowAmount,
+                filter: `url(#${glowId})`
               }
             ),
             /* @__PURE__ */ jsx(
-              "animate",
+              "path",
               {
-                attributeName: "y2",
-                values: y2,
-                dur: `${resolvedDuration}s`,
-                begin: `${delay}s`,
-                keyTimes: "0; 1",
-                keySplines: "0.16 1 0.3 1",
-                calcMode: "spline",
-                repeatCount: "indefinite"
+                d: pathD,
+                stroke: `url(#${id})`,
+                strokeWidth: pathWidth,
+                strokeLinecap: "round",
+                opacity: "0.55"
               }
             )
           ] })
-        ] }) })
+        ) : packets.map((packetDelay, i) => /* @__PURE__ */ jsxs(
+          "g",
+          {
+            className: "packet",
+            "data-packet": i,
+            style: { "--_delay": `${packetDelay}s` },
+            children: [
+              /* @__PURE__ */ jsxs("g", { className: "bloom", opacity: 0.3 + 0.7 * glowAmount, children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "bloom-disc",
+                    cx: landing.x,
+                    cy: landing.y,
+                    r: landingRadius + 6,
+                    style: { fill: `color-mix(in oklab, ${gradientStopColor} 75%, white)` },
+                    filter: `url(#${bloomId})`
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "bloom-ring",
+                    cx: landing.x,
+                    cy: landing.y,
+                    r: landingRadius + 4,
+                    strokeWidth: "1",
+                    style: { stroke: `color-mix(in oklab, ${gradientStopColor} 55%, white)` }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("g", { filter: `url(#${glowId})`, opacity: glowAmount, children: glows.map((layer, j) => /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "packet-layer",
+                  d: flowD,
+                  pathLength: 1e3,
+                  strokeWidth: pathWidth * layer.width + 2,
+                  strokeLinecap: "round",
+                  style: { ...dashVars(layer), stroke: layer.color },
+                  opacity: layer.opacity
+                },
+                j
+              )) }),
+              layers.map((layer, j) => /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: layer.core ? "packet-layer packet-core" : "packet-layer",
+                  "data-layer": layer.key,
+                  d: flowD,
+                  pathLength: 1e3,
+                  strokeWidth: pathWidth * layer.width,
+                  strokeLinecap: "round",
+                  style: layer.core ? { ...dashVars(layer), "--_core": gradientStartColor } : { ...dashVars(layer), stroke: layer.color },
+                  opacity: layer.opacity
+                },
+                j
+              ))
+            ]
+          },
+          i
+        ))
       ]
     }
   );
 }
 export {
-  AnimatedBeam
+  AnimatedBeam,
+  beamDuration,
+  glowLayers,
+  packetLayers
 };

package/dist/components/animated-tooltip/AnimatedTooltip.d.ts

@@ -9,5 +9,14 @@ export interface AnimatedTooltipProps {
     items: TooltipItem[];
     /** Additional CSS classes for the container */
     className?: string;
+    /**
+     * Tint of the presence ring and the light sweep under the name. Any CSS
+     * colour (`"#f5a97f"`, `"oklch(0.7 0.14 160)"`, `"var(--primary)"`).
+     * Leave unset for the default soft iridescent pair, which adapts to the
+     * light and dark themes.
+     */
+    accent?: string;
+    /** Avatar diameter in pixels. */
+    size?: number;
 }
-export declare function AnimatedTooltip({ items, className }: AnimatedTooltipProps): import("react").JSX.Element;
+export declare function AnimatedTooltip({ items, className, accent, size }: AnimatedTooltipProps): import("react").JSX.Element;