@romansmirnov/doku 1.0.0

package/icons/icons/rabbit.tsx

@@ -0,0 +1,107 @@
+"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 RabbitIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RabbitIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const TRANSITION: Transition = {
+  duration: 0.6,
+  ease: [0.42, 0, 0.58, 1],
+};
+
+const SPEED_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    x: 0,
+    y: 0,
+  },
+  animate: {
+    rotate: [0, 5, -5, 3, -3, 0],
+    x: [0, 3, -3, 2, -2, 0],
+    y: [0, 1.5, -1.5, 1, -1, 0],
+    transition: TRANSITION,
+  },
+};
+
+const RabbitIcon = forwardRef<RabbitIconHandle, RabbitIconProps>(
+  ({ 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"
+          variants={SPEED_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M18 21h-8a4 4 0 0 1-4-4 7 7 0 0 1 7-7h.2L9.6 6.4a1 1 0 1 1 2.8-2.8L15.8 7h.2c3.3 0 6 2.7 6 6v1a2 2 0 0 1-2 2h-1a3 3 0 0 0-3 3" />
+          <path d="M13 16a3 3 0 0 1 2.24 5" />
+          <path d="M18 12h.01" />
+          <path d="M20 8.54V4a2 2 0 1 0-4 0v3" />
+          <path d="M7.612 12.524a3 3 0 1 0-1.6 4.3" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+RabbitIcon.displayName = "RabbitIcon";
+
+export { RabbitIcon };

package/icons/icons/radio-tower.tsx

@@ -0,0 +1,138 @@
+"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 RadioTowerIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RadioTowerIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    transition: {
+      duration: 0.4,
+    },
+  },
+  fadeOut: {
+    opacity: 0,
+    transition: { duration: 0.3 },
+  },
+  fadeIn: (i: number) => ({
+    opacity: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 20,
+      delay: i * 0.1,
+    },
+  }),
+};
+
+const RadioTowerIcon = forwardRef<RadioTowerIconHandle, RadioTowerIconProps>(
+  ({ 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("fadeOut");
+          controls.start("fadeIn");
+        },
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      async (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          await controls.start("fadeOut");
+          controls.start("fadeIn");
+        }
+      },
+      [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="M4.9 16.1C1 12.2 1 5.8 4.9 1.9"
+            initial={{ opacity: 1 }}
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={0}
+            d="M7.8 4.7a6.14 6.14 0 0 0-.8 7.5"
+            initial={{ opacity: 1 }}
+            variants={VARIANTS}
+          />
+          <circle cx="12" cy="9" r="2" />
+          <motion.path
+            animate={controls}
+            custom={0}
+            d="M16.2 4.8c2 2 2.26 5.11.8 7.47"
+            initial={{ opacity: 1 }}
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={1}
+            d="M19.1 1.9a9.96 9.96 0 0 1 0 14.1"
+            initial={{ opacity: 1 }}
+            variants={VARIANTS}
+          />
+          <path d="M9.5 18h5" />
+          <path d="m8 22 4-11 4 11" />
+        </svg>
+      </div>
+    );
+  }
+);
+
+RadioTowerIcon.displayName = "RadioTowerIcon";
+
+export { RadioTowerIcon };

package/icons/icons/radio.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 RadioIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RadioIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    transition: {
+      duration: 0.4,
+    },
+  },
+  fadeOut: {
+    opacity: 0,
+    transition: { duration: 0.3 },
+  },
+  fadeIn: (i: number) => ({
+    opacity: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 20,
+      delay: i * 0.1,
+    },
+  }),
+};
+
+const RadioIcon = forwardRef<RadioIconHandle, RadioIconProps>(
+  ({ 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("fadeOut");
+          controls.start("fadeIn");
+        },
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      async (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          await controls.start("fadeOut");
+          controls.start("fadeIn");
+        }
+      },
+      [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="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"
+            initial={{ opacity: 1 }}
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={0}
+            d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"
+            initial={{ opacity: 1 }}
+            variants={VARIANTS}
+          />
+          <circle cx="12" cy="12" r="2" />
+          <motion.path
+            animate={controls}
+            custom={0}
+            d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"
+            initial={{ opacity: 1 }}
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={1}
+            d="M19.1 4.9C23 8.8 23 15.1 19.1 19"
+            initial={{ opacity: 1 }}
+            variants={VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+RadioIcon.displayName = "RadioIcon";
+
+export { RadioIcon };

package/icons/icons/redo-dot.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { cubicBezier, motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface RedoDotIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RedoDotIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CUSTOM_EASING = cubicBezier(0.25, 0.1, 0.25, 1);
+
+const RedoDotIcon = forwardRef<RedoDotIconHandle, RedoDotIconProps>(
+  ({ 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 7v6h-6"
+            transition={{ duration: 0.6, ease: CUSTOM_EASING }}
+            variants={{
+              normal: { translateX: 0, translateY: 0, rotate: 0 },
+              animate: {
+                translateX: [0, -2.1, 0],
+                translateY: [0, -1.4, 0],
+                rotate: [0, -12, 0],
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"
+            transition={{ duration: 0.6, ease: CUSTOM_EASING }}
+            variants={{
+              normal: { pathLength: 1 },
+              animate: { pathLength: [1, 0.8, 1] },
+            }}
+          />
+          <motion.circle
+            animate={controls}
+            cx="12"
+            cy="17"
+            r="1"
+            transition={{ duration: 0.6, ease: CUSTOM_EASING }}
+            variants={{
+              normal: { scale: 1 },
+              animate: { scale: [1, 1.2, 1] },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+RedoDotIcon.displayName = "RedoDotIcon";
+
+export { RedoDotIcon };

package/icons/icons/redo.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { cubicBezier, motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface RedoIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RedoIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CUSTOM_EASING = cubicBezier(0.25, 0.1, 0.25, 1);
+
+const RedoIcon = forwardRef<RedoIconHandle, RedoIconProps>(
+  ({ 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 7v6h-6"
+            transition={{ duration: 0.6, ease: CUSTOM_EASING }}
+            variants={{
+              normal: { translateX: 0, translateY: 0, rotate: 0 },
+              animate: {
+                translateX: [0, -2.1, 0],
+                translateY: [0, -1.4, 0],
+                rotate: [0, -12, 0],
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"
+            transition={{ duration: 0.6, ease: CUSTOM_EASING }}
+            variants={{
+              normal: { pathLength: 1 },
+              animate: { pathLength: [1, 0.8, 1] },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+RedoIcon.displayName = "RedoIcon";
+
+export { RedoIcon };

package/icons/icons/refresh-ccw-dot.tsx

@@ -0,0 +1,88 @@
+"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 RefreshCCWDotIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RefreshCCWDotIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RefreshCCWDotIcon = forwardRef<
+  RefreshCCWDotIconHandle,
+  RefreshCCWDotIconProps
+>(({ 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.g
+          animate={controls}
+          transition={{ type: "spring", stiffness: 250, damping: 25 }}
+          variants={{
+            normal: { rotate: "0deg" },
+            animate: { rotate: "-50deg" },
+          }}
+        >
+          <path d="M3 2v6h6" />
+          <path d="M21 12A9 9 0 0 0 6 5.3L3 8" />
+          <path d="M21 22v-6h-6" />
+          <path d="M3 12a9 9 0 0 0 15 6.7l3-2.7" />
+        </motion.g>
+        <circle cx="12" cy="12" r="1" />
+      </svg>
+    </div>
+  );
+});
+
+RefreshCCWDotIcon.displayName = "RefreshCCWDotIcon";
+
+export { RefreshCCWDotIcon };