@romansmirnov/doku 1.0.0

package/icons/icons/hand-metal.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface HandMetalIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HandMetalIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HandMetalIcon = forwardRef<HandMetalIconHandle, HandMetalIconProps>(
+  ({ 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) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          initial="normal"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          style={{ originX: "50%", originY: "90%" }}
+          variants={{
+            normal: { rotate: 0 },
+            animate: {
+              rotate: [0, -15, 15, -10, 10, 0],
+              transition: {
+                duration: 0.6,
+                ease: "easeInOut",
+              },
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M18 12.5V10a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1.4" />
+          <path d="M14 11V9a2 2 0 1 0-4 0v2" />
+          <path d="M10 10.5V5a2 2 0 1 0-4 0v9" />
+          <path d="m7 15-1.76-1.76a2 2 0 0 0-2.83 2.82l3.6 3.6C7.5 21.14 9.2 22 12 22h2a8 8 0 0 0 8-8V7a2 2 0 1 0-4 0v5" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+HandMetalIcon.displayName = "HandMetalIcon";
+
+export { HandMetalIcon };

package/icons/icons/hand.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface HandIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HandIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HandIcon = forwardRef<HandIconHandle, HandIconProps>(
+  ({ 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) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          initial="normal"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={{
+            normal: { rotate: 0, originX: "50%", originY: "90%" },
+            animate: {
+              rotate: [0, -15, 10, -5, 0],
+              transition: {
+                duration: 0.8,
+                ease: "easeInOut",
+              },
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+          <path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" />
+          <path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" />
+          <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+HandIcon.displayName = "HandIcon";
+
+export { HandIcon };

package/icons/icons/hard-drive-download.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface HardDriveDownloadIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HardDriveDownloadIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ARROW_VARIANTS: Variants = {
+  normal: { y: -1 },
+  animate: {
+    y: 0,
+    transition: {
+      type: "spring",
+      stiffness: 200,
+      damping: 10,
+      mass: 1,
+    },
+  },
+};
+
+const HardDriveDownloadIcon = forwardRef<
+  HardDriveDownloadIconHandle,
+  HardDriveDownloadIconProps
+>(({ 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) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        fill="none"
+        height={size}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect height="8" rx="2" width="20" x="2" y="14" />
+        <path d="M6 18h.01" />
+        <path d="M10 18h.01" />
+        <motion.g animate={controls} variants={ARROW_VARIANTS}>
+          <path d="M12 2v8" />
+          <path d="m16 6-4 4-4-4" />
+        </motion.g>
+      </svg>
+    </div>
+  );
+});
+
+HardDriveDownloadIcon.displayName = "HardDriveDownloadIcon";
+
+export { HardDriveDownloadIcon };

package/icons/icons/hard-drive-upload.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface HardDriveUploadIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HardDriveUploadIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ARROW_VARIANTS: Variants = {
+  normal: { y: 0 },
+  animate: {
+    y: -1,
+    transition: {
+      type: "spring",
+      stiffness: 200,
+      damping: 10,
+      mass: 1,
+    },
+  },
+};
+
+const HardDriveUploadIcon = forwardRef<
+  HardDriveUploadIconHandle,
+  HardDriveUploadIconProps
+>(({ 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) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        fill="none"
+        height={size}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect height="8" rx="2" width="20" x="2" y="14" />
+        <path d="M6 18h.01" />
+        <path d="M10 18h.01" />
+        <motion.g animate={controls} variants={ARROW_VARIANTS}>
+          <path d="m16 6-4-4-4 4" />
+          <path d="M12 2v8" />
+        </motion.g>
+      </svg>
+    </div>
+  );
+});
+
+HardDriveUploadIcon.displayName = "HardDriveUploadIcon";
+
+export { HardDriveUploadIcon };

package/icons/icons/heart-handshake.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface HeartHandshakeIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HeartHandshakeIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HeartHandshakeIcon = forwardRef<
+  HeartHandshakeIconHandle,
+  HeartHandshakeIconProps
+>(({ 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) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <motion.svg
+        animate={controls}
+        fill="none"
+        height={size}
+        initial="normal"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        style={{ originX: "50%", originY: "50%" }}
+        variants={{
+          normal: { scale: 1, rotate: 0 },
+          animate: {
+            scale: [1, 0.9, 1, 1, 1, 1, 1],
+            rotate: [0, 0, 0, -7, 7, -3, 0],
+            transition: {
+              duration: 0.7,
+
+              times: [0, 0.15, 0.3, 0.4, 0.55, 0.75, 1],
+              ease: "easeInOut",
+            },
+          },
+        }}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762" />
+      </motion.svg>
+    </div>
+  );
+});
+
+HeartHandshakeIcon.displayName = "HeartHandshakeIcon";
+
+export { HeartHandshakeIcon };

package/icons/icons/heart-pulse.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface HeartPulseIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HeartPulseIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HEART_DRAW_VARIANTS: Variants = {
+  normal: { pathLength: 1, opacity: 1 },
+  hidden: { pathLength: 0, opacity: 0 },
+  draw: { pathLength: [0, 1], opacity: [0, 1] },
+};
+
+const HEART_PULSE_VARIANTS: Variants = {
+  normal: { scale: 1 },
+  pulse: { scale: [1, 1.08, 1] },
+};
+
+const LINE_VARIANTS: Variants = {
+  normal: { pathLength: 1, pathOffset: 0, opacity: 1 },
+  animate: { pathLength: [0, 1], pathOffset: [1, 0], opacity: [0, 1] },
+};
+
+const HeartPulseIcon = forwardRef<HeartPulseIconHandle, HeartPulseIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const heartDrawControls = useAnimation();
+    const heartPulseControls = useAnimation();
+    const lineControls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    const startAnimation = useCallback(async () => {
+      heartDrawControls.start("hidden", { duration: 0 });
+      await lineControls.start("animate", {
+        duration: 0.6,
+        ease: "linear",
+        opacity: { duration: 0.1 },
+      });
+      await heartDrawControls.start("draw", {
+        duration: 0.5,
+        ease: "easeOut",
+        opacity: { duration: 0.1 },
+      });
+      heartPulseControls.start("pulse", {
+        duration: 0.9,
+        repeat: 1,
+        ease: "easeInOut",
+      });
+    }, [heartDrawControls, heartPulseControls, lineControls]);
+
+    const stopAnimation = useCallback(() => {
+      heartDrawControls.start("normal", { duration: 0.3 });
+      heartPulseControls.start("normal", { duration: 0.3 });
+      lineControls.start("normal", { duration: 0.3 });
+    }, [heartDrawControls, heartPulseControls, lineControls]);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return { startAnimation, stopAnimation };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          startAnimation();
+        }
+      },
+      [startAnimation, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          stopAnimation();
+        }
+      },
+      [stopAnimation, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.g
+            animate={heartPulseControls}
+            style={{ originX: "12px", originY: "12px" }}
+            variants={HEART_PULSE_VARIANTS}
+          >
+            <motion.path
+              animate={heartDrawControls}
+              d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+              variants={HEART_DRAW_VARIANTS}
+            />
+          </motion.g>
+          <motion.path
+            animate={lineControls}
+            d="M3.22 13H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27"
+            variants={LINE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+HeartPulseIcon.displayName = "HeartPulseIcon";
+
+export { HeartPulseIcon };