@romansmirnov/doku 1.0.0

package/icons/icons/file-stack.tsx

@@ -0,0 +1,105 @@
+"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 FileStackIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FileStackIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const FileStackIcon = forwardRef<FileStackIconHandle, FileStackIconProps>(
+  ({ 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 7h-3a2 2 0 0 1-2-2V2"
+            variants={{
+              normal: { translateX: 0, translateY: 0 },
+              animate: { translateX: -4, translateY: 4 },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M21 6v6.5c0 .8-.7 1.5-1.5 1.5h-7c-.8 0-1.5-.7-1.5-1.5v-9c0-.8.7-1.5 1.5-1.5H17Z"
+            variants={{
+              normal: { translateX: 0, translateY: 0 },
+              animate: { translateX: -4, translateY: 4 },
+            }}
+          />
+          <path d="M7 8v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H15" />
+          <motion.path
+            animate={controls}
+            d="M3 12v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H11"
+            variants={{
+              normal: { translateX: 0, translateY: 0 },
+              animate: { translateX: 4, translateY: -4 },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FileStackIcon.displayName = "FileStackIcon";
+
+export { FileStackIcon };

package/icons/icons/file-text.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { motion, useAnimation } from "motion/react";
+import type React from "react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface FileTextIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FileTextIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const FILE_TEXT = forwardRef<FileTextIconHandle, FileTextIconProps>(
+  ({ 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.05,
+              transition: {
+                duration: 0.3,
+                ease: "easeOut",
+              },
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+          <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+
+          <motion.path
+            d="M10 9H8"
+            stroke="currentColor"
+            strokeWidth="2"
+            variants={{
+              normal: {
+                pathLength: 1,
+                x1: 8,
+                x2: 10,
+              },
+              animate: {
+                pathLength: [1, 0, 1],
+                x1: [8, 10, 8],
+                x2: [10, 10, 10],
+                transition: {
+                  duration: 0.7,
+                  delay: 0.3,
+                },
+              },
+            }}
+          />
+          <motion.path
+            d="M16 13H8"
+            stroke="currentColor"
+            strokeWidth="2"
+            variants={{
+              normal: {
+                pathLength: 1,
+                x1: 8,
+                x2: 16,
+              },
+              animate: {
+                pathLength: [1, 0, 1],
+                x1: [8, 16, 8],
+                x2: [16, 16, 16],
+                transition: {
+                  duration: 0.7,
+                  delay: 0.5,
+                },
+              },
+            }}
+          />
+          <motion.path
+            d="M16 17H8"
+            stroke="currentColor"
+            strokeWidth="2"
+            variants={{
+              normal: {
+                pathLength: 1,
+                x1: 8,
+                x2: 16,
+              },
+              animate: {
+                pathLength: [1, 0, 1],
+                x1: [8, 16, 8],
+                x2: [16, 16, 16],
+                transition: {
+                  duration: 0.7,
+                  delay: 0.7,
+                },
+              },
+            }}
+          />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+FILE_TEXT.displayName = "FileTextIcon";
+
+export { FILE_TEXT as FileTextIcon };

package/icons/icons/fingerprint.tsx

@@ -0,0 +1,197 @@
+"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 FingerprintIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FingerprintIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    opacity: [0, 0, 1, 1, 1],
+    pathLength: [0.1, 0.3, 0.5, 0.7, 0.9, 1],
+    transition: {
+      opacity: { duration: 0.5 },
+      pathLength: {
+        duration: 2,
+      },
+    },
+  },
+};
+
+const FingerprintIcon = forwardRef<FingerprintIconHandle, FingerprintIconProps>(
+  ({ 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="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"
+            fill="none"
+            strokeOpacity={0.4}
+            strokeWidth="2"
+          />
+          <motion.path
+            animate={controls}
+            d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"
+            variants={PATH_VARIANTS}
+          />
+
+          <path
+            d="M14 13.12c0 2.38 0 6.38-1 8.88"
+            fill="none"
+            strokeOpacity={0.4}
+            strokeWidth="2"
+          />
+          <motion.path
+            animate={controls}
+            d="M14 13.12c0 2.38 0 6.38-1 8.88"
+            variants={PATH_VARIANTS}
+          />
+
+          <path
+            d="M17.29 21.02c.12-.6.43-2.3.5-3.02"
+            fill="none"
+            strokeOpacity={0.4}
+            strokeWidth="2"
+          />
+          <motion.path
+            animate={controls}
+            d="M17.29 21.02c.12-.6.43-2.3.5-3.02"
+            variants={PATH_VARIANTS}
+          />
+
+          <path
+            d="M2 12a10 10 0 0 1 18-6"
+            fill="none"
+            strokeOpacity={0.4}
+            strokeWidth="2"
+          />
+          <motion.path
+            animate={controls}
+            d="M2 12a10 10 0 0 1 18-6"
+            variants={PATH_VARIANTS}
+          />
+
+          <path d="M2 16h.01" fill="none" strokeOpacity={0.4} strokeWidth="2" />
+          <motion.path
+            animate={controls}
+            d="M2 16h.01"
+            variants={PATH_VARIANTS}
+          />
+
+          <path
+            d="M21.8 16c.2-2 .131-5.354 0-6"
+            fill="none"
+            strokeOpacity={0.4}
+            strokeWidth="2"
+          />
+          <motion.path
+            animate={controls}
+            d="M21.8 16c.2-2 .131-5.354 0-6"
+            variants={PATH_VARIANTS}
+          />
+
+          <path
+            d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"
+            fill="none"
+            strokeOpacity={0.4}
+            strokeWidth="2"
+          />
+          <motion.path
+            animate={controls}
+            d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"
+            variants={PATH_VARIANTS}
+          />
+
+          <path
+            d="M8.65 22c.21-.66.45-1.32.57-2"
+            fill="none"
+            strokeOpacity={0.4}
+            strokeWidth="2"
+          />
+          <motion.path
+            animate={controls}
+            d="M8.65 22c.21-.66.45-1.32.57-2"
+            variants={PATH_VARIANTS}
+          />
+
+          <path
+            d="M9 6.8a6 6 0 0 1 9 5.2v2"
+            fill="none"
+            strokeOpacity={0.4}
+            strokeWidth="2"
+          />
+          <motion.path
+            animate={controls}
+            d="M9 6.8a6 6 0 0 1 9 5.2v2"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FingerprintIcon.displayName = "FingerprintIcon";
+
+export { FingerprintIcon };

package/icons/icons/fish-symbol.tsx

@@ -0,0 +1,101 @@
+"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 FishSymbolIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FishSymbolIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      delay: 0.15,
+      opacity: { delay: 0.1 },
+    },
+  },
+};
+
+const FishSymbolIcon = forwardRef<FishSymbolIconHandle, FishSymbolIconProps>(
+  ({ 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="M2 16s9-15 20-4C11 23 2 8 2 8"
+            variants={VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FishSymbolIcon.displayName = "FishSymbolIcon";
+
+export { FishSymbolIcon };

package/icons/icons/flame.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 FlameIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FlameIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    pathOffset: 0,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.1,
+      duration: 0.4,
+      opacity: { duration: 0.1, delay: 0.1 },
+    },
+  },
+};
+
+const FlameIcon = forwardRef<FlameIconHandle, FlameIconProps>(
+  ({ 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="M8.9 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"
+            fill="none"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FlameIcon.displayName = "FlameIcon";
+
+export { FlameIcon };