@romansmirnov/doku 1.0.0

package/icons/icons/hammer.tsx

@@ -0,0 +1,105 @@
+"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 HammerIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HammerIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HAMMER_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    transition: {
+      duration: 0.3,
+      ease: "easeOut",
+    },
+  },
+  animate: {
+    rotate: [0, -20, 25, 0],
+    transition: {
+      duration: 0.8,
+      times: [0, 0.6, 0.8, 1],
+      ease: ["easeInOut", "easeOut", "easeOut"],
+    },
+  },
+};
+
+const HammerIcon = forwardRef<HammerIconHandle, HammerIconProps>(
+  ({ 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={{ transformOrigin: "0% 100%", transformBox: "fill-box" }}
+          variants={HAMMER_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9" />
+          <path d="m18 15 4-4" />
+          <path d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+HammerIcon.displayName = "HammerIcon";
+
+export { HammerIcon };

package/icons/icons/hand-coins.tsx

@@ -0,0 +1,150 @@
+"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 HandCoinsIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HandCoinsIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CIRCLE_VARIANTS: Variants = {
+  normal: {
+    translateY: 0,
+    opacity: 1,
+    transition: {
+      opacity: { duration: 0.2 },
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8,
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    translateY: [-20, 0],
+    transition: {
+      opacity: { duration: 0.2 },
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8,
+    },
+  },
+};
+
+const SECOND_CIRCLE_VARIANTS: Variants = {
+  normal: {
+    translateY: 0,
+    opacity: 1,
+    transition: {
+      opacity: { duration: 0.2 },
+      delay: 0.15,
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8,
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    translateY: [-20, 0],
+    transition: {
+      opacity: { duration: 0.2 },
+      delay: 0.15,
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8,
+    },
+  },
+};
+
+const HandCoinsIcon = forwardRef<HandCoinsIconHandle, HandCoinsIconProps>(
+  ({ 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"
+        >
+          <path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17" />
+          <path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" />
+          <path d="m2 16 6 6" />
+          <motion.circle
+            animate={controls}
+            cx="16"
+            cy="9"
+            r="2.9"
+            variants={CIRCLE_VARIANTS}
+          />
+          <motion.circle
+            animate={controls}
+            cx="6"
+            cy="5"
+            r="3"
+            variants={SECOND_CIRCLE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+HandCoinsIcon.displayName = "HandCoinsIcon";
+
+export { HandCoinsIcon };

package/icons/icons/hand-fist.tsx

@@ -0,0 +1,98 @@
+"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 HandFistIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HandFistIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HandFistIcon = forwardRef<HandFistIconHandle, HandFistIconProps>(
+  ({ 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: { y: 0, scale: 1 },
+            animate: {
+              y: [0, -4, 0],
+              scale: [1, 1.1, 1],
+              transition: {
+                duration: 0.4,
+                ease: "easeInOut",
+                repeat: 1,
+                repeatType: "reverse",
+              },
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12.035 17.012a3 3 0 0 0-3-3l-.311-.002a.72.72 0 0 1-.505-1.229l1.195-1.195A2 2 0 0 1 10.828 11H12a2 2 0 0 0 0-4H9.243a3 3 0 0 0-2.122.879l-2.707 2.707A4.83 4.83 0 0 0 3 14a8 8 0 0 0 8 8h2a8 8 0 0 0 8-8V7a2 2 0 1 0-4 0v2a2 2 0 1 0 4 0" />
+          <path d="M13.888 9.662A2 2 0 0 0 17 8V5A2 2 0 1 0 13 5" />
+          <path d="M9 5A2 2 0 1 0 5 5V10" />
+          <path d="M9 7V4A2 2 0 1 1 13 4V7.268" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+HandFistIcon.displayName = "HandFistIcon";
+
+export { HandFistIcon };

package/icons/icons/hand-grab.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 HandGrabIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HandGrabIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HandGrabIcon = forwardRef<HandGrabIconHandle, HandGrabIconProps>(
+  ({ 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: { scale: 1 },
+            animate: {
+              scale: [1, 0.9, 1],
+              transition: {
+                duration: 0.4,
+                ease: "easeInOut",
+              },
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M18 11.5V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1.4" />
+          <path d="M14 10V8a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" />
+          <path d="M10 9.9V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v5" />
+          <path d="M6 14a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+          <path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8 2 2 0 1 1 4 0" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+HandGrabIcon.displayName = "HandGrabIcon";
+
+export { HandGrabIcon };

package/icons/icons/hand-heart.tsx

@@ -0,0 +1,114 @@
+"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 HandHeartIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HandHeartIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+const HEART_VARIANTS: Variants = {
+  normal: {
+    translateY: 0,
+    scale: 1,
+    transition: {
+      delay: 0.1,
+      scale: { duration: 0.2 },
+      type: "spring",
+      stiffness: 200,
+      damping: 25,
+    },
+  },
+  animate: {
+    translateY: [0, -2],
+    scale: [1, 1.1],
+    transition: {
+      delay: 0.1,
+      scale: { duration: 0.2 },
+      type: "spring",
+      stiffness: 200,
+      damping: 25,
+    },
+  },
+};
+
+const HandHeartIcon = forwardRef<HandHeartIconHandle, HandHeartIconProps>(
+  ({ 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"
+          style={{ overflow: "visible" }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16" />
+          <path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" />
+          <path d="m2 15 6 6" />
+          <motion.path
+            animate={controls}
+            d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"
+            variants={HEART_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+HandHeartIcon.displayName = "HandHeartIcon";
+
+export { HandHeartIcon };

package/icons/icons/hand-helping.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 HandHelpingIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HandHelpingIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HandHelpingIcon = forwardRef<HandHelpingIconHandle, HandHelpingIconProps>(
+  ({ 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: { x: 0, y: 0 },
+            animate: {
+              x: [0, 2, 0],
+              y: [0, -2, 0],
+              transition: {
+                duration: 0.5,
+                ease: "easeInOut",
+              },
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M11 12h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 14" />
+          <path d="m7 18 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" />
+          <path d="m2 13 6 6" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+HandHelpingIcon.displayName = "HandHelpingIcon";
+
+export { HandHelpingIcon };