@romansmirnov/doku 1.0.0

package/icons/icons/dribbble.tsx

@@ -0,0 +1,183 @@
+"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 DribbbleIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface DribbbleIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CIRCLE_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const DribbbleIcon = forwardRef<DribbbleIconHandle, DribbbleIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const circleControls = useAnimation();
+    const path1Controls = useAnimation();
+    const path2Controls = useAnimation();
+    const path3Controls = useAnimation();
+
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => {
+          circleControls.start("animate");
+          path1Controls.start("animate");
+          path2Controls.start("animate");
+          path3Controls.start("animate");
+        },
+        stopAnimation: () => {
+          circleControls.start("normal");
+          path1Controls.start("normal");
+          path2Controls.start("normal");
+          path3Controls.start("normal");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          circleControls.start("animate");
+          path1Controls.start("animate");
+          path2Controls.start("animate");
+          path3Controls.start("animate");
+        }
+      },
+      [
+        circleControls,
+        onMouseEnter,
+        path1Controls,
+        path2Controls,
+        path3Controls,
+      ]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          circleControls.start("normal");
+          path1Controls.start("normal");
+          path2Controls.start("normal");
+          path3Controls.start("normal");
+        }
+      },
+      [
+        circleControls,
+        path1Controls,
+        path2Controls,
+        path3Controls,
+        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.circle
+            animate={circleControls}
+            cx="12"
+            cy="12"
+            initial="normal"
+            r="10"
+            variants={CIRCLE_VARIANTS}
+          />
+          <motion.path
+            animate={path1Controls}
+            d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={path2Controls}
+            d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={path3Controls}
+            d="M8.56 2.75c4.37 6 6 9.42 8 17.72"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+DribbbleIcon.displayName = "DribbbleIcon";
+
+export { DribbbleIcon };

package/icons/icons/droplet.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 DropletIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface DropletIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DropletIcon = forwardRef<DropletIconHandle, DropletIconProps>(
+  ({ 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"
+        >
+          <motion.path
+            animate={controls}
+            d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"
+            transition={{ duration: 0.6, delay: 0.2 }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                opacity: 1,
+                pathOffset: 0,
+              },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+                pathOffset: [1, 0],
+              },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+DropletIcon.displayName = "DropletIcon";
+
+export { DropletIcon };

package/icons/icons/drum.tsx

@@ -0,0 +1,112 @@
+"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 DrumIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface DrumIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+  },
+  animate: (custom: number) => ({
+    rotate: custom === 1 ? [-10, 10, 0] : [10, -10, 0],
+    transition: {
+      delay: 0.1 * custom,
+      repeat: Number.POSITIVE_INFINITY,
+      repeatType: "reverse",
+      duration: 0.5,
+    },
+  }),
+};
+
+const DrumIcon = forwardRef<DrumIconHandle, DrumIconProps>(
+  ({ 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"
+        >
+          <motion.path
+            animate={controls}
+            custom={1}
+            d="m2 2 8 8"
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={2}
+            d="m22 2-8 8"
+            variants={VARIANTS}
+          />
+          <ellipse cx="12" cy="9" rx="10" ry="5" />
+          <path d="M7 13.4v7.9" />
+          <path d="M12 14v8" />
+          <path d="M17 13.4v7.9" />
+          <path d="M2 9v8a10 5 0 0 0 20 0V9" />
+        </svg>
+      </div>
+    );
+  }
+);
+
+DrumIcon.displayName = "DrumIcon";
+
+export { DrumIcon };

package/icons/icons/earth.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import type { Transition, 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 EarthIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface EarthIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CIRCLE_TRANSITION: Transition = {
+  duration: 0.3,
+  delay: 0.1,
+  opacity: { delay: 0.15 },
+};
+
+const CIRCLE_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+  },
+};
+
+const EarthIcon = forwardRef<EarthIconHandle, EarthIconProps>(
+  ({ 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"
+        >
+          <motion.path
+            animate={controls}
+            d="M21.54 15H17a2 2 0 0 0-2 2v4.54"
+            transition={{ duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                opacity: 1,
+                pathOffset: 0,
+              },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+                pathOffset: [1, 0],
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"
+            transition={{ duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                opacity: 1,
+                pathOffset: 0,
+              },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+                pathOffset: [1, 0],
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"
+            transition={{ duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                opacity: 1,
+                pathOffset: 0,
+              },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+                pathOffset: [1, 0],
+              },
+            }}
+          />
+          <motion.circle
+            animate={controls}
+            cx="12"
+            cy="12"
+            r="10"
+            transition={CIRCLE_TRANSITION}
+            variants={CIRCLE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+EarthIcon.displayName = "EarthIcon";
+
+export { EarthIcon };

package/icons/icons/euro.tsx

@@ -0,0 +1,141 @@
+"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 EuroIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface EuroIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const EURO_MAIN_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const EURO_SECONDARY_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      delay: 0.3,
+      duration: 0.3,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      delay: 0.5,
+      duration: 0.4,
+      opacity: { duration: 0.1, delay: 0.5 },
+    },
+  },
+};
+
+const EuroIcon = forwardRef<EuroIconHandle, EuroIconProps>(
+  ({ 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"
+        >
+          <motion.path
+            animate={controls}
+            d="M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"
+            initial="normal"
+            variants={EURO_MAIN_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M16 10h-12"
+            initial="normal"
+            variants={EURO_SECONDARY_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M13 14h-9"
+            initial="normal"
+            variants={EURO_SECONDARY_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+EuroIcon.displayName = "EuroIcon";
+
+export { EuroIcon };