@romansmirnov/doku 1.0.0

package/icons/icons/refresh-ccw.tsx

@@ -0,0 +1,86 @@
+"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 RefreshCCWIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RefreshCCWIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RefreshCCWIcon = forwardRef<RefreshCCWIconHandle, RefreshCCWIconProps>(
+  ({ 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>
+        </svg>
+      </div>
+    );
+  }
+);
+
+RefreshCCWIcon.displayName = "RefreshCCWIcon";
+
+export { RefreshCCWIcon };

package/icons/icons/refresh-cw-off.tsx

@@ -0,0 +1,90 @@
+"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 RefreshCWOffIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RefreshCWOffIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RefreshCWOffIcon = forwardRef<
+  RefreshCWOffIconHandle,
+  RefreshCWOffIconProps
+>(({ 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: 500, damping: 20 }}
+        variants={{
+          normal: { x: 0 },
+          animate: {
+            x: [-3, 3, -3, 3, 0],
+            transition: { duration: 0.4 },
+          },
+        }}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M21 8L18.74 5.74A9.75 9.75 0 0 0 12 3C11 3 10.03 3.16 9.13 3.47" />
+        <path d="M8 16H3v5" />
+        <path d="M3 12C3 9.51 4 7.26 5.64 5.64" />
+        <path d="m3 16 2.26 2.26A9.75 9.75 0 0 0 12 21c2.49 0 4.74-1 6.36-2.64" />
+        <path d="M21 12c0 1-.16 1.97-.47 2.87" />
+        <path d="M21 3v5h-5" />
+        <path d="M22 22 2 2" />
+      </motion.svg>
+    </div>
+  );
+});
+
+RefreshCWOffIcon.displayName = "RefreshCWOffIcon";
+
+export { RefreshCWOffIcon };

package/icons/icons/refresh-cw.tsx

@@ -0,0 +1,83 @@
+"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 RefreshCCWIconWIcon {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RefreshCCWIcoWIcon extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RefreshCWIcon = forwardRef<RefreshCCWIconWIcon, RefreshCCWIcoWIcon>(
+  ({ 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="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+          <path d="M21 3v5h-5" />
+          <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+          <path d="M8 16H3v5" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+RefreshCWIcon.displayName = "RefreshCWIcon";
+
+export { RefreshCWIcon };

package/icons/icons/rocket.tsx

@@ -0,0 +1,130 @@
+"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 RocketIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RocketIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: {
+    x: 0,
+    y: 0,
+  },
+  animate: {
+    x: [0, 0, -3, 2, -2, 1, -1, 0],
+    y: [0, -3, 0, -2, -3, -1, -2, 0],
+    transition: {
+      duration: 6,
+      ease: "easeInOut",
+      repeat: Number.POSITIVE_INFINITY,
+      repeatType: "reverse",
+      times: [0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9, 1],
+    },
+  },
+};
+
+const FIRE_VARIANTS: Variants = {
+  normal: {
+    d: "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z",
+  },
+  animate: {
+    d: [
+      "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z",
+      "M4.5 16.5c-1.5 1.26-3 5.5-3 5.5s4.74-1 6-2.5c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z",
+      "M4.5 16.5c-1.5 1.26-2.2 4.8-2.2 4.8s3.94-0.3 5.2-1.8c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z",
+      "M4.5 16.5c-1.5 1.26-2.8 5.2-2.8 5.2s4.54-0.7 5.8-2.2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z",
+      "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z",
+    ],
+    transition: {
+      duration: 2,
+      ease: [0.4, 0, 0.2, 1],
+      repeat: Number.POSITIVE_INFINITY,
+      times: [0, 0.2, 0.5, 0.8, 1],
+    },
+  },
+};
+
+const RocketIcon = forwardRef<RocketIconHandle, RocketIconProps>(
+  ({ 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={VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            animate={controls}
+            d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
+            variants={FIRE_VARIANTS}
+          />
+          <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
+          <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
+          <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+RocketIcon.displayName = "RocketIcon";
+
+export { RocketIcon };

package/icons/icons/rocking-chair.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 RockingChairIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RockingChairIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 100,
+  damping: 12,
+  mass: 0.4,
+};
+
+const ROCKING_VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: [-5, 5, -5],
+    transition: {
+      repeat: Number.POSITIVE_INFINITY,
+      repeatType: "mirror" as const,
+      duration: 1.2,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const RockingChairIcon = forwardRef<
+  RockingChairIconHandle,
+  RockingChairIconProps
+>(({ 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"
+        style={{ originX: "10%", originY: "90%" }}
+        variants={ROCKING_VARIANTS}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <motion.polyline
+          animate={controls}
+          points="3.5 2 6.5 12.5 18 12.5"
+          transition={DEFAULT_TRANSITION}
+        />
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          x1="9.5"
+          x2="5.5"
+          y1="12.5"
+          y2="20"
+        />
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          x1="15"
+          x2="18.5"
+          y1="12.5"
+          y2="20"
+        />
+        <motion.path
+          animate={controls}
+          d="M2.75 18a13 13 0 0 0 18.5 0"
+          transition={DEFAULT_TRANSITION}
+        />
+      </motion.svg>
+    </div>
+  );
+});
+
+RockingChairIcon.displayName = "RockingChairIcon";
+
+export { RockingChairIcon };

package/icons/icons/roller-coaster.tsx

@@ -0,0 +1,109 @@
+"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 RollerCoasterIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RollerCoasterIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: (custom: number) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      delay: 0.1 * custom,
+      opacity: { delay: 0.1 * custom },
+    },
+  }),
+};
+
+const RollerCoasterIcon = forwardRef<
+  RollerCoasterIconHandle,
+  RollerCoasterIconProps
+>(({ 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 19V5" variants={VARIANTS} />
+        <motion.path animate={controls} d="M10 19V6.8" variants={VARIANTS} />
+        <motion.path animate={controls} d="M14 19v-7.8" variants={VARIANTS} />
+        <motion.path animate={controls} d="M18 5v4" variants={VARIANTS} />
+        <motion.path animate={controls} d="M18 19v-6" variants={VARIANTS} />
+        <motion.path animate={controls} d="M22 19V9" variants={VARIANTS} />
+        <motion.path
+          animate={controls}
+          custom={2}
+          d="M2 19V9a4 4 0 0 1 4-4c2 0 4 1.33 6 4s4 4 6 4a4 4 0 1 0-3-6.65"
+          variants={VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+RollerCoasterIcon.displayName = "RollerCoasterIcon";
+
+export { RollerCoasterIcon };

package/icons/icons/rotate-ccw.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 RotateCCWIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RotateCCWIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RotateCCWIcon = forwardRef<RotateCCWIconHandle, RotateCCWIconProps>(
+  ({ 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="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+          <path d="M3 3v5h5" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+RotateCCWIcon.displayName = "RotateCCWIcon";
+
+export { RotateCCWIcon };