@romansmirnov/doku 1.0.0

package/icons/icons/rotate-cw.tsx

@@ -0,0 +1,81 @@
+"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 RotateCWIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RotateCWIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RotateCWIcon = forwardRef<RotateCWIconHandle, RotateCWIconProps>(
+  ({ 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}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          transition={{ type: "spring", stiffness: 250, damping: 25 }}
+          variants={{
+            normal: { rotate: "0deg" },
+            animate: { rotate: "50deg" },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+          <path d="M21 3v5h-5" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+RotateCWIcon.displayName = "RotateCWIcon";
+
+export { RotateCWIcon };

package/icons/icons/route.tsx

@@ -0,0 +1,131 @@
+"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 RouteIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RouteIconProps 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 RouteIcon = forwardRef<RouteIconHandle, RouteIconProps>(
+  ({ 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.circle
+            animate={controls}
+            cx="6"
+            cy="19"
+            r="3"
+            transition={CIRCLE_TRANSITION}
+            variants={CIRCLE_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"
+            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="18"
+            cy="5"
+            r="3"
+            transition={CIRCLE_TRANSITION}
+            variants={CIRCLE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+RouteIcon.displayName = "RouteIcon";
+
+export { RouteIcon };

package/icons/icons/russian-ruble.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 RussianRubleIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RussianRubleIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RUSSIAN_RUBLE_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 RUSSIAN_RUBLE_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 RussianRubleIcon = forwardRef<
+  RussianRubleIconHandle,
+  RussianRubleIconProps
+>(({ 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="M6 11h8a4 4 0 0 0 0-8H9v18"
+          initial="normal"
+          variants={RUSSIAN_RUBLE_MAIN_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M6 15h8"
+          initial="normal"
+          variants={RUSSIAN_RUBLE_SECONDARY_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+RussianRubleIcon.displayName = "RussianRubleIcon";
+
+export { RussianRubleIcon };

package/icons/icons/saudi-riyal.tsx

@@ -0,0 +1,124 @@
+"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 SaudiRiyalIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SaudiRiyalIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SAUDI_RIYAL_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 SaudiRiyalIcon = forwardRef<SaudiRiyalIconHandle, SaudiRiyalIconProps>(
+  ({ 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="m20 19.5-5.5 1.2"
+            initial="normal"
+            variants={SAUDI_RIYAL_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M14.5 4v11.22a1 1 0 0 0 1.242.97L20 15.2"
+            initial="normal"
+            variants={SAUDI_RIYAL_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m2.978 19.351 5.549-1.363A2 2 0 0 0 10 16V2"
+            initial="normal"
+            variants={SAUDI_RIYAL_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M20 10 4 13.5"
+            initial="normal"
+            variants={SAUDI_RIYAL_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+SaudiRiyalIcon.displayName = "SaudiRiyalIcon";
+
+export { SaudiRiyalIcon };

package/icons/icons/scan-face.tsx

@@ -0,0 +1,145 @@
+"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 ScanFaceIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ScanFaceIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ScanFaceIcon = forwardRef<ScanFaceIconHandle, ScanFaceIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: async () => {
+          await controls.start("hidden");
+          await controls.start("visible");
+        },
+        stopAnimation: () => controls.start("visible"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      async (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          await controls.start("hidden");
+          await controls.start("visible");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("visible");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    const faceVariants: Variants = {
+      visible: { scale: 1 },
+      hidden: {
+        scale: 0.9,
+        transition: { type: "spring", stiffness: 200, damping: 20 },
+      },
+    };
+
+    const cornerVariants: Variants = {
+      visible: { scale: 1, rotate: 0, opacity: 1 },
+      hidden: {
+        scale: 1.2,
+        rotate: 45,
+        opacity: 0,
+        transition: { type: "spring", stiffness: 200, damping: 20 },
+      },
+    };
+
+    const mouthVariants: Variants = {
+      visible: { scale: 1, opacity: 1 },
+      hidden: {
+        scale: 0.8,
+        opacity: 0,
+        transition: { duration: 0.3, delay: 0.1 },
+      },
+    };
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={faceVariants}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            animate={controls}
+            d="M3 7V5a2 2 0 0 1 2-2h2"
+            initial="visible"
+            variants={cornerVariants}
+          />
+          <motion.path
+            animate={controls}
+            d="M17 3h2a2 2 0 0 1 2 2v2"
+            initial="visible"
+            variants={cornerVariants}
+          />
+          <motion.path
+            animate={controls}
+            d="M21 17v2a2 2 0 0 1-2 2h-2"
+            initial="visible"
+            variants={cornerVariants}
+          />
+          <motion.path
+            animate={controls}
+            d="M7 21H5a2 2 0 0 1-2-2v-2"
+            initial="visible"
+            variants={cornerVariants}
+          />
+          <motion.path
+            animate={controls}
+            d="M8 14s1.5 2 4 2 4-2 4-2"
+            initial="visible"
+            variants={mouthVariants}
+          />
+          <line x1="9" x2="9.01" y1="9" y2="9" />
+          <line x1="15" x2="15.01" y1="9" y2="9" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+ScanFaceIcon.displayName = "ScanFaceIcon";
+
+export { ScanFaceIcon };