align-right

1"use client";
2 
3import type { Transition } 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 AlignRightIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface AlignRightIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const DEFAULT_TRANSITION: Transition = {
20  type: "spring",
21  stiffness: 150,
22  damping: 15,
23  mass: 0.3,
24};
25 
26const AlignRightIcon = forwardRef<AlignRightIconHandle, AlignRightIconProps>(
27  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
28    const controls = useAnimation();
29    const isControlledRef = useRef(false);
30 
31    useImperativeHandle(ref, () => {
32      isControlledRef.current = true;
33 
34      return {
35        startAnimation: () => controls.start("animate"),
36        stopAnimation: () => controls.start("normal"),
37      };
38    });
39 
40    const handleMouseEnter = useCallback(
41      (e: React.MouseEvent<HTMLDivElement>) => {
42        if (isControlledRef.current) {
43          onMouseEnter?.(e);
44        } else {
45          controls.start("animate");
46        }
47      },
48      [controls, onMouseEnter]
49    );
50 
51    const handleMouseLeave = useCallback(
52      (e: React.MouseEvent<HTMLDivElement>) => {
53        if (isControlledRef.current) {
54          onMouseLeave?.(e);
55        } else {
56          controls.start("normal");
57        }
58      },
59      [controls, onMouseLeave]
60    );
61 
62    return (
63      <div
64        className={cn(className)}
65        onMouseEnter={handleMouseEnter}
66        onMouseLeave={handleMouseLeave}
67        {...props}
68      >
69        <svg
70          fill="none"
71          height={size}
72          stroke="currentColor"
73          strokeLinecap="round"
74          strokeLinejoin="round"
75          strokeWidth="2"
76          viewBox="0 0 24 24"
77          width={size}
78          xmlns="http://www.w3.org/2000/svg"
79        >
80          <motion.line
81            animate={controls}
82            transition={DEFAULT_TRANSITION}
83            variants={{
84              normal: { x1: 3 },
85              animate: { x1: 3 },
86            }}
87            x1="3"
88            x2="21"
89            y1="6"
90            y2="6"
91          />
92 
93          <motion.line
94            animate={controls}
95            transition={DEFAULT_TRANSITION}
96            variants={{
97              normal: { x1: 9 },
98// … truncated