@romansmirnov/doku 1.0.0

package/icons/icons/linkedin.tsx

@@ -0,0 +1,185 @@
+"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 LinkedinIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface LinkedinIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+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 RECT_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 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 LinkedinIcon = forwardRef<LinkedinIconHandle, LinkedinIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const pathControls = useAnimation();
+    const rectControls = useAnimation();
+    const circleControls = useAnimation();
+
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => {
+          pathControls.start("animate");
+          rectControls.start("animate");
+          circleControls.start("animate");
+        },
+        stopAnimation: () => {
+          pathControls.start("normal");
+          rectControls.start("normal");
+          circleControls.start("normal");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          pathControls.start("animate");
+          rectControls.start("animate");
+          circleControls.start("animate");
+        }
+      },
+      [circleControls, onMouseEnter, pathControls, rectControls]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          pathControls.start("normal");
+          rectControls.start("normal");
+          circleControls.start("normal");
+        }
+      },
+      [pathControls, rectControls, circleControls, 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={pathControls}
+            d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.rect
+            animate={rectControls}
+            height="12"
+            initial="normal"
+            variants={RECT_VARIANTS}
+            width="4"
+            x="2"
+            y="9"
+          />
+          <motion.circle
+            animate={circleControls}
+            cx="4"
+            cy="4"
+            initial="normal"
+            r="2"
+            variants={CIRCLE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+LinkedinIcon.displayName = "LinkedinIcon";
+
+export { LinkedinIcon };

package/icons/icons/loader-circle.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 LoaderCircleIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface LoaderCircleIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const G_VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: 360,
+    transition: {
+      repeat: Number.POSITIVE_INFINITY,
+      duration: 0.8,
+      ease: "linear",
+    },
+  },
+};
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 50,
+  damping: 10,
+};
+
+const LoaderCircleIcon = forwardRef<
+  LoaderCircleIconHandle,
+  LoaderCircleIconProps
+>(({ 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 12a9 9 0 1 1-6.219-8.56"
+          style={{ transformOrigin: "12px 12px" }}
+          transition={DEFAULT_TRANSITION}
+          variants={G_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+LoaderCircleIcon.displayName = "LoaderCircleIcon";
+
+export { LoaderCircleIcon };

package/icons/icons/loader-pinwheel.tsx

@@ -0,0 +1,110 @@
+"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 LoaderPinwheelIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface LoaderPinwheelIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const G_VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: 360,
+    transition: {
+      repeat: Number.POSITIVE_INFINITY,
+      duration: 1,
+      ease: "linear",
+    },
+  },
+};
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 50,
+  damping: 10,
+};
+
+const LoaderPinwheelIcon = forwardRef<
+  LoaderPinwheelIconHandle,
+  LoaderPinwheelIconProps
+>(({ 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={DEFAULT_TRANSITION}
+          variants={G_VARIANTS}
+        >
+          <path d="M22 12a1 1 0 0 1-10 0 1 1 0 0 0-10 0" />
+          <path d="M7 20.7a1 1 0 1 1 5-8.7 1 1 0 1 0 5-8.6" />
+          <path d="M7 3.3a1 1 0 1 1 5 8.6 1 1 0 1 0 5 8.6" />
+        </motion.g>
+        <circle cx="12" cy="12" r="10" />
+      </svg>
+    </div>
+  );
+});
+
+LoaderPinwheelIcon.displayName = "LoaderPinwheelIcon";
+
+export { LoaderPinwheelIcon };

package/icons/icons/loader.tsx

@@ -0,0 +1,113 @@
+"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 LoaderIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface LoaderIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const G_VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: 360,
+    transition: {
+      repeat: Number.POSITIVE_INFINITY,
+      duration: 0.8,
+      ease: "linear",
+    },
+  },
+};
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 50,
+  damping: 10,
+};
+
+const LoaderIcon = forwardRef<LoaderIconHandle, LoaderIconProps>(
+  ({ 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}
+            style={{ transformOrigin: "12px 12px" }}
+            transition={DEFAULT_TRANSITION}
+            variants={G_VARIANTS}
+          >
+            <path d="M12 2v4" />
+            <path d="m16.2 7.8 2.9-2.9" />
+            <path d="M18 12h4" />
+            <path d="m16.2 16.2 2.9 2.9" />
+            <path d="M12 18v4" />
+            <path d="m4.9 19.1 2.9-2.9" />
+            <path d="M2 12h4" />
+            <path d="m4.9 4.9 2.9 2.9" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+LoaderIcon.displayName = "LoaderIcon";
+
+export { LoaderIcon };

package/icons/icons/lock-keyhole-open.tsx

@@ -0,0 +1,116 @@
+"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 LockKeyholeOpenIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface LockKeyholeOpenIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const LockKeyholeOpenIcon = forwardRef<
+  LockKeyholeOpenIconHandle,
+  LockKeyholeOpenIconProps
+>(({ 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"
+        transition={{
+          duration: 1,
+          ease: [0.4, 0, 0.2, 1],
+        }}
+        variants={{
+          normal: {
+            rotate: 0,
+            scale: 1,
+          },
+          animate: {
+            rotate: [2, 4, -2, 0],
+            scale: [1.05, 0.95, 1.02, 1],
+          },
+        }}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="12" cy="16" r="1" />
+        <rect height="12" rx="2" width="18" x="3" y="10" />
+        <motion.path
+          animate={controls}
+          d="M7 10V7a5 5 0 0 1 10 0v3"
+          initial="normal"
+          transition={{
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+          }}
+          variants={{
+            normal: {
+              pathLength: 0.8,
+            },
+            animate: {
+              pathLength: 1,
+            },
+          }}
+        />
+      </motion.svg>
+    </div>
+  );
+});
+
+LockKeyholeOpenIcon.displayName = "LockKeyholeOpenIcon";
+
+export { LockKeyholeOpenIcon };