v7.0.1

2026-01-11 08:39:14 +07:00
parent cb6dfc1638
commit 9260adc2d2
97 changed files with 9452 additions and 12379 deletions
@@ -0,0 +1,118 @@
+'use client';
+import type { Variants } from 'motion/react';
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { motion, useAnimation } from 'motion/react';
+import { cn } from '@/lib/utils';
+
+export interface FileMusicIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+
+interface FileMusicIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+    normal: {
+        pathLength: 1,
+        opacity: 1,
+    },
+    animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+        },
+    },
+};
+
+const FileMusicIcon = forwardRef<FileMusicIconHandle, FileMusicIconProps>(
+    ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+        const controls = useAnimation();
+        const isControlledRef = useRef(false);
+
+        useImperativeHandle(ref, () => {
+            isControlledRef.current = true;
+            return {
+                startAnimation: () => controls.start('animate'),
+                stopAnimation: () => controls.start('normal'),
+            };
+        });
+
+        const handleMouseEnter = useCallback(
+            (e: React.MouseEvent<HTMLDivElement>) => {
+                if (!isControlledRef.current) {
+                    controls.start('animate');
+                } else {
+                    onMouseEnter?.(e);
+                }
+            },
+            [controls, onMouseEnter]
+        );
+
+        const handleMouseLeave = useCallback(
+            (e: React.MouseEvent<HTMLDivElement>) => {
+                if (!isControlledRef.current) {
+                    controls.start('normal');
+                } else {
+                    onMouseLeave?.(e);
+                }
+            },
+            [controls, onMouseLeave]
+        );
+
+        return (
+            <div
+                className={cn(className)}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                {...props}
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={size}
+                    height={size}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                >
+                    <motion.path
+                        d="M11.65 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v10.35"
+                        variants={PATH_VARIANTS}
+                        animate={controls}
+                        initial="normal"
+                    />
+                    <motion.path
+                        d="M14 2v5a1 1 0 0 0 1 1h5"
+                        variants={PATH_VARIANTS}
+                        animate={controls}
+                        initial="normal"
+                    />
+                    <motion.path
+                        d="M8 20v-7l3 1.474"
+                        variants={PATH_VARIANTS}
+                        animate={controls}
+                        initial="normal"
+                    />
+                    <motion.circle
+                        cx="6"
+                        cy="20"
+                        r="2"
+                        variants={PATH_VARIANTS}
+                        animate={controls}
+                        initial="normal"
+                    />
+                </svg>
+            </div>
+        );
+    }
+);
+
+FileMusicIcon.displayName = 'FileMusicIcon';
+export { FileMusicIcon };