align-vertical

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