Animated Icons

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8type TriggerOn = "hover" | "tap" | "focus" | "mount" | "none";
9 
10interface BaseIconProps
11  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
12  /** Icon size in px (width & height). */
13  size?: number;
14  /** What kicks off the animation. */
15  triggerOn?: TriggerOn;
16}
17 
18/**
19 * Shared decorative-icon wrapper. Icons are `aria-hidden` and never focusable —
20 * they inherit their meaning from the containing button/link. The wrapper is a
21 * plain `<span>` so it does not disturb focus order.
22 */
23function useTrigger(triggerOn: TriggerOn) {
24  const [active, setActive] = React.useState(triggerOn === "mount");
25 
26  React.useEffect(() => {
27    if (triggerOn === "mount") setActive(true);
28  }, [triggerOn]);
29 
30  const handlers: React.HTMLAttributes<HTMLSpanElement> = {};
31  if (triggerOn === "hover") {
32    handlers.onPointerEnter = () => setActive(true);
33    handlers.onPointerLeave = () => setActive(false);
34  } else if (triggerOn === "tap") {
35    handlers.onPointerDown = () => setActive((a) => !a);
36  } else if (triggerOn === "focus") {
37    // The parent button owns focus; mirror its focus via focus-within on span.
38    handlers.onFocusCapture = () => setActive(true);
39    handlers.onBlurCapture = () => setActive(false);
40  }
41 
42  return { active, handlers };
43}
44 
45const EASE = [0.2, 0, 0, 1] as const;
46 
47/**
48 * AnimatedArrow — a right-pointing arrow that nudges on trigger.
49 *
50 * Accessibility: decorative only (`aria-hidden`, `focusable="false"`, not
51 * tabbable); a labelled parent control conveys meaning. Under
52 * `prefers-reduced-motion` it renders static. Clean-room original.
53 */
54export const AnimatedArrow = React.forwardRef<HTMLSpanElement, BaseIconProps>(
55  ({ size = 18, triggerOn = "hover", className, ...props }, ref) => {
56    const reduce = useReducedMotion();
57    const { active, handlers } = useTrigger(triggerOn);
58    const nudge = reduce ? 0 : active && triggerOn !== "none" ? 3 : 0;
59 
60    return (
61      <span
62        ref={ref}
63        aria-hidden="true"
64        className={cn("inline-flex", className)}
65        {...handlers}
66        {...props}
67      >
68        <svg
69          viewBox="0 0 24 24"
70          width={size}
71          height={size}
72          fill="none"
73          stroke="currentColor"
74          strokeWidth={2}
75          strokeLinecap="round"
76          strokeLinejoin="round"
77          focusable="false"
78// … truncated