fancy-ui-react 0.3.0 → 0.4.0

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

@@ -0,0 +1,327 @@
+"use client";
+const DEFAULT_DAMPING = 45;
+const DEFAULT_STIFFNESS = 400;
+const DEFAULT_MASS = 1;
+const LABEL_STIFFNESS_SCALE = 0.55;
+const LABEL_DAMPING_SCALE = 1.1;
+const MAX_DT = 0.064;
+const WAKE_DT = 1 / 60;
+const MIN_ROTATION_DISTANCE = 0.1;
+const ROTATION_EASE = 0.3;
+const LABEL_TETHER = 24;
+const LABEL_TILT_PER_VELOCITY = 35e-4;
+const LABEL_MAX_TILT = 5;
+const SETTLE_DISTANCE = 0.05;
+const SETTLE_VELOCITY = 1;
+const SETTLE_ROTATION = 0.05;
+function resolveConfig(springConfig) {
+  return {
+    damping: springConfig?.damping ?? DEFAULT_DAMPING,
+    stiffness: springConfig?.stiffness ?? DEFAULT_STIFFNESS,
+    mass: springConfig?.mass ?? DEFAULT_MASS
+  };
+}
+function resolveLabelConfig(labelSpring, springConfig) {
+  const base = resolveConfig(springConfig);
+  return {
+    damping: labelSpring?.damping ?? base.damping * LABEL_DAMPING_SCALE,
+    stiffness: labelSpring?.stiffness ?? base.stiffness * LABEL_STIFFNESS_SCALE,
+    mass: labelSpring?.mass ?? base.mass
+  };
+}
+function createSmoothCursor(el, options) {
+  const { cursor } = el;
+  let label = el.label ?? null;
+  const onVisibleChange = options.onVisibleChange;
+  const onIdleChange = options.onIdleChange;
+  let springConfig = options.springConfig;
+  let labelSpring = options.labelSpring;
+  let rotate = options.rotate ?? true;
+  let idleFade = Math.max(0, options.idleFade ?? 0);
+  let reducedMotion = options.reducedMotion ?? false;
+  let posX = 0;
+  let posY = 0;
+  let velX = 0;
+  let velY = 0;
+  let targetX = 0;
+  let targetY = 0;
+  let labelX = 0;
+  let labelY = 0;
+  let labelVelX = 0;
+  let labelVelY = 0;
+  let rotation = 0;
+  let prevX = 0;
+  let prevY = 0;
+  let visible = false;
+  let idle = false;
+  let idleTimer = null;
+  let rafId = null;
+  let lastTime = 0;
+  let sleeping = false;
+  let waking = false;
+  let destroyed = false;
+  function setVisible(next) {
+    if (visible === next) return;
+    visible = next;
+    onVisibleChange?.(visible);
+  }
+  function setIdle(next) {
+    if (idle === next) return;
+    idle = next;
+    onIdleChange?.(idle);
+  }
+  function clearIdleTimer() {
+    if (idleTimer !== null) {
+      clearTimeout(idleTimer);
+      idleTimer = null;
+    }
+  }
+  function markActive() {
+    clearIdleTimer();
+    setIdle(false);
+    if (idleFade > 0) {
+      idleTimer = setTimeout(() => {
+        idleTimer = null;
+        setIdle(true);
+      }, idleFade);
+    }
+  }
+  function startAnimation() {
+    if (rafId === null) {
+      if (sleeping) {
+        waking = true;
+      } else {
+        lastTime = 0;
+      }
+      sleeping = false;
+      rafId = requestAnimationFrame(animate);
+    }
+  }
+  function stopAnimation() {
+    sleeping = false;
+    waking = false;
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  }
+  function writeLabel(tilt) {
+    if (!label) return;
+    label.style.transform = tilt === 0 ? `translate3d(${labelX}px, ${labelY}px, 0)` : `translate3d(${labelX}px, ${labelY}px, 0) rotate(${tilt}deg)`;
+  }
+  function snapLabel() {
+    labelX = posX;
+    labelY = posY;
+    labelVelX = 0;
+    labelVelY = 0;
+    writeLabel(0);
+  }
+  function snapToTarget() {
+    posX = targetX;
+    posY = targetY;
+    velX = 0;
+    velY = 0;
+    if (!rotate) rotation = 0;
+    cursor.style.transform = `translate3d(${posX}px, ${posY}px, 0)`;
+    snapLabel();
+  }
+  function placeAtTarget() {
+    posX = targetX;
+    posY = targetY;
+    prevX = targetX;
+    prevY = targetY;
+    labelX = targetX;
+    labelY = targetY;
+    labelVelX = 0;
+    labelVelY = 0;
+  }
+  function onMouseMove(e) {
+    targetX = e.clientX;
+    targetY = e.clientY;
+    if (!visible) {
+      placeAtTarget();
+      setVisible(true);
+    }
+    markActive();
+    if (reducedMotion) {
+      snapToTarget();
+    } else {
+      startAnimation();
+    }
+  }
+  function onMouseLeave() {
+    setVisible(false);
+    clearIdleTimer();
+    setIdle(false);
+    stopAnimation();
+  }
+  function onMouseEnter(e) {
+    targetX = e.clientX;
+    targetY = e.clientY;
+    placeAtTarget();
+    setVisible(true);
+    markActive();
+    if (!reducedMotion) {
+      startAnimation();
+    } else {
+      snapToTarget();
+    }
+  }
+  function animate(time) {
+    rafId = null;
+    if (!visible) return;
+    if (lastTime === 0) {
+      lastTime = time;
+      rafId = requestAnimationFrame(animate);
+      return;
+    }
+    let dt = Math.min((time - lastTime) / 1e3, MAX_DT);
+    if (waking) {
+      dt = Math.min(dt, WAKE_DT);
+      waking = false;
+    }
+    lastTime = time;
+    const { stiffness, damping, mass } = resolveConfig(springConfig);
+    const forceX = -stiffness * (posX - targetX) - damping * velX;
+    const forceY = -stiffness * (posY - targetY) - damping * velY;
+    const accX = forceX / mass;
+    const accY = forceY / mass;
+    velX += accX * dt;
+    velY += accY * dt;
+    posX += velX * dt;
+    posY += velY * dt;
+    if (rotate) {
+      const dx = posX - prevX;
+      const dy = posY - prevY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance > MIN_ROTATION_DISTANCE) {
+        const targetRotation = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+        let diff = targetRotation - rotation;
+        while (diff > 180) diff -= 360;
+        while (diff < -180) diff += 360;
+        rotation += diff * ROTATION_EASE;
+      }
+    } else if (rotation !== 0) {
+      rotation += -rotation * ROTATION_EASE;
+      if (Math.abs(rotation) < SETTLE_ROTATION) rotation = 0;
+    }
+    prevX = posX;
+    prevY = posY;
+    let tilt = 0;
+    let labelSettled = true;
+    if (label) {
+      const lc = resolveLabelConfig(labelSpring, springConfig);
+      const lfx = -lc.stiffness * (labelX - posX) - lc.damping * labelVelX;
+      const lfy = -lc.stiffness * (labelY - posY) - lc.damping * labelVelY;
+      labelVelX += lfx / lc.mass * dt;
+      labelVelY += lfy / lc.mass * dt;
+      labelX += labelVelX * dt;
+      labelY += labelVelY * dt;
+      const gapX = labelX - posX;
+      const gapY = labelY - posY;
+      const gap = Math.sqrt(gapX * gapX + gapY * gapY);
+      if (gap > LABEL_TETHER) {
+        const k = LABEL_TETHER / gap;
+        labelX = posX + gapX * k;
+        labelY = posY + gapY * k;
+      }
+      tilt = Math.max(
+        -LABEL_MAX_TILT,
+        Math.min(LABEL_MAX_TILT, labelVelX * LABEL_TILT_PER_VELOCITY)
+      );
+      if (Math.abs(tilt) < 0.01) tilt = 0;
+      labelSettled = Math.abs(labelX - targetX) < SETTLE_DISTANCE && Math.abs(labelY - targetY) < SETTLE_DISTANCE && Math.abs(labelVelX) < SETTLE_VELOCITY && Math.abs(labelVelY) < SETTLE_VELOCITY;
+    }
+    const settled = labelSettled && Math.abs(posX - targetX) < SETTLE_DISTANCE && Math.abs(posY - targetY) < SETTLE_DISTANCE && Math.abs(velX) < SETTLE_VELOCITY && Math.abs(velY) < SETTLE_VELOCITY && (rotate || rotation === 0);
+    if (settled) {
+      posX = targetX;
+      posY = targetY;
+      velX = 0;
+      velY = 0;
+      prevX = posX;
+      prevY = posY;
+      if (label) {
+        labelX = targetX;
+        labelY = targetY;
+        labelVelX = 0;
+        labelVelY = 0;
+        tilt = 0;
+      }
+    }
+    cursor.style.transform = `translate3d(${posX}px, ${posY}px, 0) rotate(${rotation}deg)`;
+    writeLabel(tilt);
+    if (settled) {
+      sleeping = true;
+      return;
+    }
+    rafId = requestAnimationFrame(animate);
+  }
+  const previousBodyCursor = document.body.style.cursor;
+  document.body.style.cursor = "none";
+  document.addEventListener("mousemove", onMouseMove);
+  document.documentElement.addEventListener("mouseleave", onMouseLeave);
+  document.documentElement.addEventListener("mouseenter", onMouseEnter);
+  return {
+    setOptions(next) {
+      if (destroyed) return;
+      if ("springConfig" in next) {
+        springConfig = next.springConfig;
+      }
+      if ("labelSpring" in next) {
+        labelSpring = next.labelSpring;
+      }
+      if ("rotate" in next) {
+        rotate = next.rotate ?? true;
+        if (!rotate && rotation !== 0) {
+          if (reducedMotion) {
+            rotation = 0;
+            cursor.style.transform = `translate3d(${posX}px, ${posY}px, 0)`;
+          } else if (visible) {
+            startAnimation();
+          }
+        }
+      }
+      if ("idleFade" in next) {
+        idleFade = Math.max(0, next.idleFade ?? 0);
+        clearIdleTimer();
+        if (idleFade === 0) {
+          setIdle(false);
+        } else if (visible && !idle) {
+          markActive();
+        }
+      }
+      if ("reducedMotion" in next) {
+        reducedMotion = next.reducedMotion ?? false;
+        if (reducedMotion) {
+          stopAnimation();
+          snapToTarget();
+        } else if (visible) {
+          startAnimation();
+        }
+      }
+    },
+    setLabel(next) {
+      if (destroyed || next === label) return;
+      label = next;
+      if (!label) return;
+      snapLabel();
+    },
+    resize() {
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      document.body.style.cursor = previousBodyCursor;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.documentElement.removeEventListener("mouseleave", onMouseLeave);
+      document.documentElement.removeEventListener("mouseenter", onMouseEnter);
+      clearIdleTimer();
+      stopAnimation();
+    }
+  };
+}
+export {
+  createSmoothCursor,
+  resolveConfig,
+  resolveLabelConfig
+};

package/dist/components/stepper/Step.js

@@ -30,32 +30,40 @@ const Step = forwardRef(function Step2({ label, description, children, className
   const clickable = stepper?.clickable ?? false;
   const isFirst = index === 0;
   const isLast = stepper ? index === stepper.count - 1 : true;
-  const connectorDone = stepper ? index <= stepper.current : false;
+  const railFrom = orientation === "vertical" ? index : index - 1;
+  const connectorDone = stepper && index !== -1 ? railFrom < stepper.current : false;
+  const animate = stepper?.animate ?? false;
+  const origin = stepper?.origin ?? 0;
+  const forward = stepper ? stepper.current >= origin : true;
+  const railOrder = Math.max(0, forward ? railFrom - origin : origin - 1 - railFrom);
+  const arrival = stepper && forward && index > origin && index <= stepper.current ? index - origin - 1 + 0.6 : void 0;
+  const railStyle = { "--ft-step-order": railOrder };
+  const bulletStyle = arrival === void 0 ? void 0 : { "--ft-step-arrival": arrival };
   function handleClick() {
     if (!stepper || !clickable || index === -1) return;
     stepper.select(index);
   }
   const bulletClasses = cn(
-    "ft-step-bullet relative inline-flex size-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold",
+    "ft-step-bullet relative inline-flex size-7 shrink-0 items-center justify-center rounded-full text-[12px] font-semibold tabular-nums",
     status === "done" && "ft-step-bullet-done",
-    status === "current" && "ft-step-bullet-current",
-    status === "upcoming" && "border-border text-muted-foreground border-[1.5px] bg-transparent"
+    status === "current" && "ft-step-bullet-current ft-step-bullet-halo",
+    status === "upcoming" && "ft-step-bullet-upcoming text-muted-foreground"
   );
   const defaultBullet = status === "done" ? /* @__PURE__ */ jsx(
     "svg",
     {
-      className: "size-3.5",
+      className: "ft-step-glyph ft-step-check size-3.5",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: "2.5",
+      strokeWidth: "2.75",
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5", pathLength: 1 })
     }
-  ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: index + 1 });
-  const bulletContent = /* @__PURE__ */ jsxs("span", { className: bulletClasses, "data-status": status, children: [
+  ) : /* @__PURE__ */ jsx("span", { className: "ft-step-glyph", "aria-hidden": "true", children: index + 1 });
+  const bulletContent = /* @__PURE__ */ jsxs("span", { className: bulletClasses, "data-status": status, style: bulletStyle, children: [
     children ?? defaultBullet,
     /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
       " ",
@@ -71,13 +79,15 @@ const Step = forwardRef(function Step2({ label, description, children, className
           "span",
           {
             className: cn(
-              "text-xs",
-              status === "current" ? "text-foreground font-medium" : "text-muted-foreground"
+              "ft-step-label text-xs transition-colors",
+              status === "current" && "text-foreground font-medium",
+              status === "done" && "text-foreground/80",
+              status === "upcoming" && "text-muted-foreground"
             ),
             children: label
           }
         ) : null,
-        description ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: description }) : null
+        description ? /* @__PURE__ */ jsx("span", { className: "ft-step-description text-muted-foreground/80 text-[11px] leading-snug", children: description }) : null
       ]
     }
   );
@@ -87,20 +97,22 @@ const Step = forwardRef(function Step2({ label, description, children, className
       ref,
       className: cn(
         "ft-step flex",
-        orientation === "vertical" ? cn("flex-row items-stretch gap-3", isLast ? "pb-0" : "pb-6") : cn("flex-col items-center", isFirst ? "flex-none" : "flex-1"),
+        orientation === "vertical" ? cn("flex-row items-stretch gap-3", isLast ? "pb-0" : "pb-7") : cn("flex-col items-center", isFirst ? "flex-none" : "flex-1"),
+        animate && "ft-step-animate",
         className
       ),
       "data-status": status,
       "data-orientation": orientation,
       "aria-current": status === "current" ? "step" : void 0,
-      children: orientation === "horizontal" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center", children: [
+      children: orientation === "horizontal" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start", children: [
         !isFirst && /* @__PURE__ */ jsx(
           "span",
           {
             className: cn(
-              "ft-step-connector mt-[13px] h-0.5 flex-1",
-              connectorDone ? "ft-step-connector-done" : "bg-border"
+              "ft-step-connector bg-border relative mx-1.5 mt-[13px] h-0.5 flex-1 rounded-full",
+              connectorDone && "ft-step-connector-done ft-step-connector-lit"
             ),
+            style: railStyle,
             "aria-hidden": "true"
           }
         ),
@@ -120,15 +132,16 @@ const Step = forwardRef(function Step2({ label, description, children, className
           textContent
         ] })
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center self-stretch", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center self-stretch", !isLast && "-mb-7"), children: [
           bulletContent,
           !isLast && /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
-                "ft-step-connector my-1 w-0.5 flex-1",
-                connectorDone ? "ft-step-connector-done" : "bg-border"
+                "ft-step-connector bg-border relative my-1 w-0.5 flex-1 rounded-full",
+                connectorDone && "ft-step-connector-done ft-step-connector-lit"
               ),
+              style: railStyle,
               "aria-hidden": "true"
             }
           )

package/dist/components/stepper/Stepper.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useCallback, useMemo } from "react";
+import { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { cn } from "../../utils.js";
 import { useSoundCue } from "../../sound/use-sound.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
 import { STEPPER_KEY } from "./types.js";
 const Stepper = forwardRef(function Stepper2({
   current,
@@ -35,6 +36,18 @@ const Stepper = forwardRef(function Stepper2({
     };
   }, []);
   const indexOf = useCallback((id) => registered.indexOf(id), [registered]);
+  const reduced = useReducedMotion();
+  const [asked, setAsked] = useState(false);
+  useEffect(() => {
+    setAsked(true);
+  }, []);
+  const animate = asked && !reduced;
+  const [run, setRun] = useState(() => ({ settled: activeIndex, origin: 0 }));
+  let origin = run.origin;
+  if (run.settled !== activeIndex) {
+    origin = run.settled;
+    setRun({ settled: activeIndex, origin: run.settled });
+  }
   const playCue = useSoundCue(sound);
   const select = useCallback(
     (index) => {
@@ -52,11 +65,13 @@ const Stepper = forwardRef(function Stepper2({
       clickable,
       current: activeIndex,
       count: registered.length,
+      origin,
+      animate,
       register,
       indexOf,
       select
     }),
-    [orientation, clickable, activeIndex, registered, register, indexOf, select]
+    [orientation, clickable, activeIndex, registered, origin, animate, register, indexOf, select]
   );
   return /* @__PURE__ */ jsx(STEPPER_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
     "ol",
@@ -69,6 +84,7 @@ const Stepper = forwardRef(function Stepper2({
         className
       ),
       "data-orientation": orientation,
+      "data-motion": animate ? "full" : "reduced",
       children
     }
   ) });

package/dist/components/stepper/types.d.ts

@@ -34,6 +34,19 @@ export interface StepperContext {
     readonly current: number;
     /** Total number of currently registered steps. */
     readonly count: number;
+    /**
+     * The active index before the latest change (0 on first paint). Steps
+     * order their rail sweep and bullet arrival by their distance from it.
+     * Optional so a hand-rolled context without it still type-checks; a
+     * missing value reads as "no run to order".
+     */
+    readonly origin?: number;
+    /**
+     * Whether the motion layer (rail sweep, breathing halo, check draw) is
+     * on: true on the client once `prefers-reduced-motion` has been read and
+     * is not `reduce`. Optional for the same reason as `origin`.
+     */
+    readonly animate?: boolean;
     /**
      * Registers a step under a stable per-instance id (typically
      * `useFancyId()`). Returns an unregister function; call it on unmount.

package/dist/components/timeline/Timeline.d.ts

@@ -14,5 +14,12 @@ export interface TimelineProps {
     className?: string;
     /** Content render prop, called for each item */
     content?: (item: TimelineItem) => ReactNode;
+    /**
+     * Colour of the travelling head, its trail and the lit dots. Any CSS
+     * colour. Unset, it follows the theme's `--primary` token and falls back
+     * to a soft violet when no theme is present. Also settable from CSS via
+     * `--timeline-accent`.
+     */
+    accent?: string;
 }
-export declare function Timeline({ items, title, description, className, content }: TimelineProps): import("react").JSX.Element;
+export declare function Timeline({ items, title, description, className, content, accent, }: TimelineProps): import("react").JSX.Element;