@romansmirnov/doku 1.0.0

package/icons/icons/git-pull-request-closed.tsx

@@ -0,0 +1,199 @@
+"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 GitPullRequestClosedIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GitPullRequestClosedIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DURATION = 0.3;
+
+const CALCULATE_DELAY = (i: number) => {
+  if (i === 0) return 0.1;
+
+  return i * DURATION + 0.1;
+};
+
+const GitPullRequestClosedIcon = forwardRef<
+  GitPullRequestClosedIconHandle,
+  GitPullRequestClosedIconProps
+>(({ 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="6"
+          r="3"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(0),
+            opacity: { delay: CALCULATE_DELAY(0) },
+          }}
+          variants={{
+            normal: { pathLength: 1, opacity: 1, transition: { delay: 0 } },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+            },
+          }}
+        />
+
+        <motion.path
+          animate={controls}
+          d="M6 9v12"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(1),
+            opacity: { delay: CALCULATE_DELAY(1) },
+          }}
+          variants={{
+            normal: {
+              pathLength: 1,
+              pathOffset: 0,
+              opacity: 1,
+              transition: { delay: 0 },
+            },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+              pathOffset: [1, 0],
+            },
+          }}
+        />
+
+        <motion.path
+          animate={controls}
+          d="m21 3-6 6"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(2),
+            opacity: { delay: CALCULATE_DELAY(2) },
+          }}
+          variants={{
+            normal: { opacity: 1, transition: { delay: 0 } },
+            animate: { opacity: [0, 1] },
+          }}
+        />
+
+        <motion.path
+          animate={controls}
+          d="m21 9-6-6"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(2),
+            opacity: { delay: CALCULATE_DELAY(2) },
+          }}
+          variants={{
+            normal: { opacity: 1, transition: { delay: 0 } },
+            animate: { opacity: [0, 1] },
+          }}
+        />
+
+        <motion.path
+          animate={controls}
+          d="M18 11.5V15"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(3),
+            opacity: { delay: CALCULATE_DELAY(3) },
+          }}
+          variants={{
+            normal: {
+              pathLength: 1,
+              pathOffset: 0,
+              opacity: 1,
+              transition: { delay: 0 },
+            },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+              pathOffset: [1, 0],
+            },
+          }}
+        />
+
+        <motion.circle
+          animate={controls}
+          cx="18"
+          cy="18"
+          r="3"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(4),
+            opacity: { delay: CALCULATE_DELAY(4) },
+          }}
+          variants={{
+            normal: { pathLength: 1, opacity: 1, transition: { delay: 0 } },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+            },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+GitPullRequestClosedIcon.displayName = "GitPullRequestClosedIcon";
+
+export { GitPullRequestClosedIcon };

package/icons/icons/git-pull-request-create.tsx

@@ -0,0 +1,189 @@
+"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 GitPullRequestCreateIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GitPullRequestCreateIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DURATION = 0.3;
+
+const CALCULATE_DELAY = (i: number) => {
+  if (i === 0) return 0.1;
+
+  return i * DURATION + 0.1;
+};
+
+const GitPullRequestCreateIcon = forwardRef<
+  GitPullRequestCreateIconHandle,
+  GitPullRequestCreateIconProps
+>(({ 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="6"
+          r="3"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(0),
+            opacity: { delay: CALCULATE_DELAY(0) },
+          }}
+          variants={{
+            normal: { pathLength: 1, opacity: 1, transition: { delay: 0 } },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+            },
+          }}
+        />
+
+        <motion.path
+          animate={controls}
+          d="M6 9v12"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(1),
+            opacity: { delay: CALCULATE_DELAY(1) },
+          }}
+          variants={{
+            normal: {
+              pathLength: 1,
+              pathOffset: 0,
+              opacity: 1,
+              transition: { delay: 0 },
+            },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+              pathOffset: [1, 0],
+            },
+          }}
+        />
+
+        <motion.path
+          animate={controls}
+          d="M13 6h3a2 2 0 0 1 2 2v3"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(2),
+            opacity: { delay: CALCULATE_DELAY(2) },
+          }}
+          variants={{
+            normal: {
+              pathLength: 1,
+              pathOffset: 0,
+              opacity: 1,
+              transition: { delay: 0 },
+            },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+              pathOffset: [1, 0],
+            },
+          }}
+        />
+
+        <motion.path
+          animate={controls}
+          d="M18 15v6"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(2),
+            opacity: { delay: CALCULATE_DELAY(2) },
+          }}
+          variants={{
+            normal: {
+              pathLength: 1,
+              pathOffset: 0,
+              opacity: 1,
+              transition: { delay: 0 },
+            },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+              pathOffset: [1, 0],
+            },
+          }}
+        />
+
+        <motion.path
+          animate={controls}
+          d="M21 18h-6"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(3),
+            opacity: { delay: CALCULATE_DELAY(3) },
+          }}
+          variants={{
+            normal: { opacity: 1, transition: { delay: 0 } },
+            animate: { opacity: [0, 1] },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+GitPullRequestCreateIcon.displayName = "GitPullRequestCreateIcon";
+
+export { GitPullRequestCreateIcon };

package/icons/icons/git-pull-request.tsx

@@ -0,0 +1,166 @@
+"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 GitPullRequestIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GitPullRequestIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DURATION = 0.3;
+
+const CALCULATE_DELAY = (i: number) => {
+  if (i === 0) return 0.1;
+
+  return i * DURATION + 0.1;
+};
+
+const GitPullRequestIcon = forwardRef<
+  GitPullRequestIconHandle,
+  GitPullRequestIconProps
+>(({ 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="18"
+          cy="18"
+          r="3"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(0),
+            opacity: { delay: CALCULATE_DELAY(0) },
+          }}
+          variants={{
+            normal: { pathLength: 1, opacity: 1, transition: { delay: 0 } },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+            },
+          }}
+        />
+        <motion.circle
+          animate={controls}
+          cx="6"
+          cy="6"
+          r="3"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(2),
+            opacity: { delay: CALCULATE_DELAY(2) },
+          }}
+          variants={{
+            normal: { pathLength: 1, opacity: 1, transition: { delay: 0 } },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+            },
+          }}
+        />
+        <motion.path
+          animate={controls}
+          d="M13 6h3a2 2 0 0 1 2 2v7"
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(1),
+            opacity: { delay: CALCULATE_DELAY(1) },
+          }}
+          variants={{
+            normal: {
+              pathLength: 1,
+              pathOffset: 0,
+              opacity: 1,
+              transition: { delay: 0 },
+            },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+              pathOffset: [1, 0],
+            },
+          }}
+        />
+        <motion.line
+          animate={controls}
+          transition={{
+            duration: DURATION,
+            delay: CALCULATE_DELAY(3),
+            opacity: { delay: CALCULATE_DELAY(3) },
+          }}
+          variants={{
+            normal: { opacity: 1, pathLength: 1, transition: { delay: 0 } },
+            animate: {
+              opacity: [0, 1],
+              pathLength: [0, 1],
+            },
+          }}
+          x1="6"
+          x2="6"
+          y1="9"
+          y2="21"
+        />
+      </svg>
+    </div>
+  );
+});
+
+GitPullRequestIcon.displayName = "GitPullRequestIcon";
+
+export { GitPullRequestIcon };

package/icons/icons/github.tsx

@@ -0,0 +1,149 @@
+"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 GithubIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GithubIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BODY_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    scale: 1,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    scale: [0.9, 1],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const TAIL_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    rotate: 0,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  draw: {
+    pathLength: [0, 1],
+    rotate: 0,
+    transition: {
+      duration: 0.5,
+    },
+  },
+  wag: {
+    pathLength: 1,
+    rotate: [0, -15, 15, -10, 10, -5, 5],
+    transition: {
+      duration: 2.5,
+      ease: "easeInOut",
+      repeat: Number.POSITIVE_INFINITY,
+    },
+  },
+};
+
+const GithubIcon = forwardRef<GithubIconHandle, GithubIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const bodyControls = useAnimation();
+    const tailControls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: async () => {
+          bodyControls.start("animate");
+          await tailControls.start("draw");
+          tailControls.start("wag");
+        },
+        stopAnimation: () => {
+          bodyControls.start("normal");
+          tailControls.start("normal");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      async (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          bodyControls.start("animate");
+          await tailControls.start("draw");
+          tailControls.start("wag");
+        }
+      },
+      [bodyControls, onMouseEnter, tailControls]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          bodyControls.start("normal");
+          tailControls.start("normal");
+        }
+      },
+      [bodyControls, tailControls, 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={bodyControls}
+            d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+            initial="normal"
+            variants={BODY_VARIANTS}
+          />
+          <motion.path
+            animate={tailControls}
+            d="M9 18c-4.51 2-5-2-7-2"
+            initial="normal"
+            variants={TAIL_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+GithubIcon.displayName = "GithubIcon";
+
+export { GithubIcon };