accessibility

1"use client";
2 
3import type { Variants } from "motion/react";
4import { motion, useAnimation } from "motion/react";
5import type { HTMLAttributes } from "react";
6import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
7 
8import { cn } from "@/lib/utils";
9 
10export interface AccessibilityIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface AccessibilityIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const CIRCLE_VARIANTS: Variants = {
20  initial: {
21    y: 0,
22    x: 0,
23  },
24  animate: {
25    y: [0, 1, -1, 0],
26    x: [0, 1, -1, 0],
27    transition: {
28      duration: 0.8,
29      ease: "easeInOut",
30    },
31  },
32};
33 
34const PRIMARY_GROUP_VARIANTS: Variants = {
35  initial: {
36    rotate: 0,
37  },
38  animate: {
39    rotate: [0, 5, -5, 0],
40    transition: {
41      duration: 0.8,
42      ease: "easeInOut",
43    },
44  },
45};
46 
47const SECONDARY_GROUP_VARIANTS: Variants = {
48  initial: {
49    rotate: 0,
50  },
51  animate: {
52    rotate: -360,
53    transition: {
54      duration: 1,
55      delay: 0.4,
56      ease: "easeInOut",
57    },
58  },
59};
60 
61const PATH_VARIANTS: Variants = {
62  initial: {
63    rotate: 0,
64    d: "M8 5 L5 8",
65  },
66  animate: {
67    rotate: [0, -60, 0],
68    d: ["M8 5 L5 8", "M8 5 L4 9", "M8 5 L5 8"],
69    transition: {
70      duration: 0.4,
71      delay: 0.2,
72      ease: "easeInOut",
73    },
74    transformOrigin: "top right",
75  },
76};
77 
78const AccessibilityIcon = forwardRef<
79  AccessibilityIconHandle,
80  AccessibilityIconProps
81>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
82  const controls = useAnimation();
83  const isControlledRef = useRef(false);
84 
85  useImperativeHandle(ref, () => {
86    isControlledRef.current = true;
87 
88    return {
89      startAnimation: () => controls.start("animate"),
90      stopAnimation: () => controls.start("initial"),
91    };
92  });
93 
94  const handleMouseEnter = useCallback(
95    (e: React.MouseEvent<HTMLDivElement>) => {
96      if (isControlledRef.current) {
97        onMouseEnter?.(e);
98      } else {
99        controls.start("animate");
100      }
101    },
102    [controls, onMouseEnter]
103  );
104 
105  const handleMouseLeave = useCallback(
106    (e: React.MouseEvent<HTMLDivElement>) => {
107      if (isControlledRef.current) {
108        onMouseLeave?.(e);
109      } else {
110        controls.start("normal");
111      }
112    },
113    [controls, onMouseLeave]
114  );
115 
116  return (
117    <div
118      className={cn(className)}
119      onMouseEnter={handleMouseEnter}
120      onMouseLeave={handleMouseLeave}
121      {...props}
122    >
123// … truncated