fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/smooth-cursor/SmoothCursor.js

@@ -1,183 +1,134 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useRef, useState, useEffect, useCallback } from "react";
 import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
 import { cn } from "../../utils.js";
-function SmoothCursor({ cursor, springConfig = {}, className = "" }) {
-  const config = {
-    damping: springConfig.damping ?? 45,
-    stiffness: springConfig.stiffness ?? 400,
-    mass: springConfig.mass ?? 1
-  };
+import { createSmoothCursor } from "./smooth-cursor-core.js";
+/* empty css                  */
+const TIP_X = 4;
+const TIP_Y = 3;
+function SmoothCursor({
+  cursor,
+  springConfig = {},
+  className = "",
+  label,
+  color = "#0e9f6e",
+  rotate = false,
+  idleFade = 1500,
+  labelSpring
+}) {
+  const uid = useId().replace(/[^A-Za-z0-9_-]/g, "");
+  const fillId = `smooth-cursor-fill-${uid}`;
   const cursorElRef = useRef(null);
+  const labelElRef = useRef(null);
+  const engineRef = useRef(null);
   const [visible, setVisible] = useState(false);
-  const configRef = useLiveRef(config);
-  const stateRef = useRef({
-    visible: false,
-    reducedMotion: false,
-    posX: 0,
-    posY: 0,
-    velX: 0,
-    velY: 0,
-    targetX: 0,
-    targetY: 0,
-    rotation: 0,
-    prevX: 0,
-    prevY: 0,
-    rafId: null,
-    lastTime: 0
-  });
+  const [idle, setIdle] = useState(false);
+  const reducedMotion = useReducedMotion();
+  const initRef = useLiveRef({ springConfig, labelSpring, rotate, idleFade, reducedMotion });
+  const appliedReducedMotionRef = useRef(false);
+  const hotspot = !cursor && !rotate ? `-${TIP_X}px -${TIP_Y}px` : "-50% -50%";
   useEffect(() => {
-    const s = stateRef.current;
-    function startAnimation() {
-      if (s.rafId === null) {
-        s.lastTime = 0;
-        s.rafId = requestAnimationFrame(animate);
+    const init = initRef.current;
+    appliedReducedMotionRef.current = init.reducedMotion;
+    const engine = createSmoothCursor(
+      { cursor: cursorElRef.current, label: labelElRef.current },
+      {
+        springConfig: init.springConfig,
+        labelSpring: init.labelSpring,
+        rotate: init.rotate,
+        idleFade: init.idleFade,
+        reducedMotion: init.reducedMotion,
+        onVisibleChange: setVisible,
+        onIdleChange: setIdle
       }
-    }
-    function stopAnimation() {
-      if (s.rafId !== null) {
-        cancelAnimationFrame(s.rafId);
-        s.rafId = null;
-      }
-    }
-    function snapToTarget() {
-      s.posX = s.targetX;
-      s.posY = s.targetY;
-      s.velX = 0;
-      s.velY = 0;
-      if (cursorElRef.current) {
-        cursorElRef.current.style.transform = `translate3d(${s.posX}px, ${s.posY}px, 0)`;
-      }
-    }
-    function onMouseMove(e) {
-      s.targetX = e.clientX;
-      s.targetY = e.clientY;
-      if (!s.visible) {
-        s.posX = s.targetX;
-        s.posY = s.targetY;
-        s.prevX = s.targetX;
-        s.prevY = s.targetY;
-        s.visible = true;
-        setVisible(true);
-      }
-      if (s.reducedMotion) {
-        snapToTarget();
-      } else {
-        startAnimation();
-      }
-    }
-    function onMouseLeave() {
-      s.visible = false;
-      setVisible(false);
-      stopAnimation();
-    }
-    function onMouseEnter(e) {
-      s.targetX = e.clientX;
-      s.targetY = e.clientY;
-      s.posX = s.targetX;
-      s.posY = s.targetY;
-      s.prevX = s.targetX;
-      s.prevY = s.targetY;
-      s.visible = true;
-      setVisible(true);
-      if (!s.reducedMotion) {
-        startAnimation();
-      } else {
-        snapToTarget();
-      }
-    }
-    function animate(time) {
-      if (!s.visible) {
-        s.rafId = null;
-        return;
-      }
-      s.rafId = requestAnimationFrame(animate);
-      if (s.lastTime === 0) {
-        s.lastTime = time;
-        return;
-      }
-      const dt = Math.min((time - s.lastTime) / 1e3, 0.064);
-      s.lastTime = time;
-      const { stiffness, damping, mass } = configRef.current;
-      const forceX = -stiffness * (s.posX - s.targetX) - damping * s.velX;
-      const forceY = -stiffness * (s.posY - s.targetY) - damping * s.velY;
-      const accX = forceX / mass;
-      const accY = forceY / mass;
-      s.velX += accX * dt;
-      s.velY += accY * dt;
-      s.posX += s.velX * dt;
-      s.posY += s.velY * dt;
-      const dx = s.posX - s.prevX;
-      const dy = s.posY - s.prevY;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-      if (distance > 0.1) {
-        const targetRotation = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
-        let diff = targetRotation - s.rotation;
-        while (diff > 180) diff -= 360;
-        while (diff < -180) diff += 360;
-        s.rotation += diff * 0.3;
-      }
-      s.prevX = s.posX;
-      s.prevY = s.posY;
-      if (cursorElRef.current) {
-        cursorElRef.current.style.transform = `translate3d(${s.posX}px, ${s.posY}px, 0) rotate(${s.rotation}deg)`;
-      }
-    }
-    const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    s.reducedMotion = motionQuery.matches;
-    function onMotionChange(e) {
-      s.reducedMotion = e.matches;
-      if (s.reducedMotion) {
-        stopAnimation();
-        snapToTarget();
-      } else if (s.visible) {
-        startAnimation();
-      }
-    }
-    motionQuery.addEventListener("change", onMotionChange);
-    document.body.style.cursor = "none";
-    document.addEventListener("mousemove", onMouseMove);
-    document.documentElement.addEventListener("mouseleave", onMouseLeave);
-    document.documentElement.addEventListener("mouseenter", onMouseEnter);
+    );
+    engineRef.current = engine;
     return () => {
-      document.body.style.cursor = "";
-      motionQuery.removeEventListener("change", onMotionChange);
-      document.removeEventListener("mousemove", onMouseMove);
-      document.documentElement.removeEventListener("mouseleave", onMouseLeave);
-      document.documentElement.removeEventListener("mouseenter", onMouseEnter);
-      stopAnimation();
+      engine.destroy();
+      engineRef.current = null;
     };
+  }, [initRef]);
+  useEffect(() => {
+    if (appliedReducedMotionRef.current === reducedMotion) return;
+    appliedReducedMotionRef.current = reducedMotion;
+    engineRef.current?.setOptions({ reducedMotion });
+  }, [reducedMotion]);
+  useEffect(() => {
+    engineRef.current?.setOptions({ springConfig });
+  }, [springConfig]);
+  useEffect(() => {
+    engineRef.current?.setOptions({ labelSpring });
+  }, [labelSpring]);
+  useEffect(() => {
+    engineRef.current?.setOptions({ rotate });
+  }, [rotate]);
+  useEffect(() => {
+    engineRef.current?.setOptions({ idleFade });
+  }, [idleFade]);
+  const setLabelEl = useCallback((node) => {
+    labelElRef.current = node;
+    engineRef.current?.setLabel(node);
   }, []);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: cursorElRef,
       "aria-hidden": "true",
       className: cn(
-        "pointer-events-none fixed top-0 left-0 z-[9999]",
+        "smooth-cursor pointer-events-none fixed top-0 left-0 z-[9999]",
         visible ? "opacity-100" : "opacity-0",
         className
       ),
-      style: { willChange: "transform", translate: "-50% -50%" },
-      children: cursor || // Default cursor: arrow SVG
-      /* @__PURE__ */ jsx(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "32",
-          height: "32",
-          viewBox: "0 0 32 32",
-          focusable: "false",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              fill: "currentColor",
-              d: "M9.391 2.32C8.42 1.56 7 2.253 7 3.486V28.41c0 1.538 1.966 2.18 2.874.938l6.225-8.523a2 2 0 0 1 1.615-.82h9.69c1.512 0 2.17-1.912.978-2.844z"
-            }
-          )
-        }
-      )
+      style: { "--_sc-color": `var(--smooth-cursor-color, ${color})` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: cursorElRef,
+            className: rotate ? "sc-pointer sc-pointer--rotate" : "sc-pointer",
+            style: { translate: hotspot },
+            children: cursor ? cursor : (
+              // Default cursor: coloured arrowhead with a white rim
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "sc-arrow",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  focusable: "false",
+                  children: [
+                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: fillId, x1: "0.1", y1: "0", x2: "0.75", y2: "1", children: [
+                      /* @__PURE__ */ jsx("stop", { offset: "0", className: "sc-stop-hot" }),
+                      /* @__PURE__ */ jsx("stop", { offset: "0.55", className: "sc-stop-body" }),
+                      /* @__PURE__ */ jsx("stop", { offset: "1", className: "sc-stop-deep" })
+                    ] }) }),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: "sc-arrow-rim",
+                        d: "M4 3 L19.6 13.9 L10.2 12.7 L7.3 21.7 Z",
+                        fill: `url(#${fillId})`
+                      }
+                    )
+                  ]
+                }
+              )
+            )
+          }
+        ),
+        label ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setLabelEl,
+            className: idle ? "sc-label is-idle" : "sc-label",
+            "data-smooth-cursor-label": "",
+            children: /* @__PURE__ */ jsx("span", { className: "sc-label-text", children: label })
+          }
+        ) : null
+      ]
     }
   );
 }

package/dist/components/smooth-cursor/smooth-cursor-core.d.ts

@@ -0,0 +1,85 @@
+/**
+ * SmoothCursor core — framework-free spring-physics cursor engine.
+ *
+ * Owns the rAF loop, the spring integration, rotation-from-velocity, the
+ * trailing name label (its own softer spring, tethered to the arrow), the idle
+ * timer, the `document`-level pointer listeners and the native-cursor
+ * hide/restore. The wrapper owns markup, the cursor snippet, `class`, a11y
+ * attributes and the `prefers-reduced-motion` query. The query's *mount* value
+ * is forwarded as a creation option (plain assignment, no snap); only a later
+ * *change* event is forwarded through `setOptions({ reducedMotion })`, which
+ * snaps. That split reproduces the original wrapper's two distinct
+ * reduced-motion entry points.
+ *
+ * The loop sleeps once both springs have settled on the pointer and wakes on
+ * the next pointer move; the first frame after a wake is capped to one 60 Hz
+ * step so a long rest never turns into a single oversized integration step.
+ */
+export interface SpringConfig {
+    /** Controls how quickly the animation settles (default: 45) */
+    damping?: number;
+    /** Controls the spring stiffness (default: 400) */
+    stiffness?: number;
+    /** Controls the virtual mass of the animated object (default: 1) */
+    mass?: number;
+}
+export interface SmoothCursorElements {
+    /** The fixed-position element the engine transforms in place. */
+    cursor: HTMLElement;
+    /**
+     * Optional name-label element. It trails the cursor on its own, softer
+     * spring (see `labelSpring`) and is written as
+     * `translate3d(x, y, 0) rotate(<tilt>deg)` — the wrapper adds the visual
+     * offset from the arrow tip with the CSS `translate` property. Can also be
+     * attached or swapped later with `setLabel()`.
+     */
+    label?: HTMLElement | null;
+}
+export interface SmoothCursorInitOptions {
+    /** Called whenever the engine's visibility (pointer on/off screen) changes. */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Called when the pointer has rested for `idleFade` ms (`true`) and again on
+     * the next movement (`false`). Never called while `idleFade` is 0.
+     */
+    onIdleChange?: (idle: boolean) => void;
+}
+export interface SmoothCursorLiveOptions {
+    /** Spring physics configuration. */
+    springConfig?: SpringConfig;
+    /**
+     * Spring for the label. Every field left out is derived from the resolved
+     * `springConfig`: stiffness × 0.55, damping × 1.1, same mass — a softer,
+     * more damped follow that lags the arrow by a few frames.
+     */
+    labelSpring?: SpringConfig;
+    /**
+     * Rotate the cursor toward its direction of travel. Defaults to `true` here
+     * (the engine's original behaviour); wrappers that render an upright arrow
+     * pass `false`, which eases any existing rotation back to 0.
+     */
+    rotate?: boolean;
+    /**
+     * Milliseconds without pointer movement before `onIdleChange(true)` fires.
+     * 0 (the default) disables idle tracking entirely.
+     */
+    idleFade?: number;
+    /**
+     * Wrapper-owned `prefers-reduced-motion` result. Passed at creation it is a
+     * plain initial value; pushed through `setOptions` it additionally stops the
+     * loop and snaps to the pointer (zeroing velocity), matching the original
+     * wrapper's media-query `change` handler.
+     */
+    reducedMotion?: boolean;
+}
+export interface SmoothCursorEngine {
+    setOptions(next: Partial<SmoothCursorLiveOptions>): void;
+    /** Attach, swap or detach (`null`) the label element after creation. */
+    setLabel(label: HTMLElement | null): void;
+    resize(): void;
+    destroy(): void;
+}
+export declare function resolveConfig(springConfig: SpringConfig | undefined): Required<SpringConfig>;
+/** The label's spring: explicit fields win, the rest derive from the arrow's. */
+export declare function resolveLabelConfig(labelSpring: SpringConfig | undefined, springConfig: SpringConfig | undefined): Required<SpringConfig>;
+export declare function createSmoothCursor(el: SmoothCursorElements, options: SmoothCursorInitOptions & SmoothCursorLiveOptions): SmoothCursorEngine;