@romansmirnov/doku 1.0.0

package/icons/icons/gitlab.tsx

@@ -0,0 +1,103 @@
+"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 GitlabIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GitlabIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DURATION = 0.7;
+
+const CALCULATE_DELAY = (i: number) => {
+  if (i === 0) return 0.1;
+
+  return i * DURATION + 0.1;
+};
+
+const GitlabIcon = forwardRef<GitlabIconHandle, GitlabIconProps>(
+  ({ 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="m22 13.29-3.33-10a.42.42 0 0 0-.14-.18.38.38 0 0 0-.22-.11.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18l-2.26 6.67H8.32L6.1 3.26a.42.42 0 0 0-.1-.18.38.38 0 0 0-.26-.08.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18L2 13.29a.74.74 0 0 0 .27.83L12 21l9.69-6.88a.71.71 0 0 0 .31-.83Z"
+            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],
+              },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+GitlabIcon.displayName = "GitlabIcon";
+
+export { GitlabIcon };

package/icons/icons/graduation-cap.tsx

@@ -0,0 +1,125 @@
+"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 GraduationCapIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GraduationCapIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CAP_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+  },
+  animate: {
+    y: [0, -2, 0],
+    rotate: [0, -2, 2, 0],
+    transition: {
+      duration: 0.6,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const TASSEL_VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: [0, 15, -10, 5, 0],
+    transition: {
+      duration: 0.8,
+      ease: "easeInOut",
+      delay: 0.1,
+    },
+  },
+};
+
+const GraduationCapIcon = forwardRef<
+  GraduationCapIconHandle,
+  GraduationCapIconProps
+>(({ 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" }}
+          variants={CAP_VARIANTS}
+        >
+          <path d="M2 10l10-5 10 5-10 5z" />
+          <path d="M6 12v5c3 3 9 3 12 0v-5" />
+
+          {/* Tassel now inherits cap movement */}
+          <motion.path
+            d="M22 10v6"
+            style={{
+              transformBox: "fill-box",
+              transformOrigin: "top center",
+            }}
+            variants={TASSEL_VARIANTS}
+          />
+        </motion.g>
+      </svg>
+    </div>
+  );
+});
+
+GraduationCapIcon.displayName = "GraduationCapIcon";
+
+export { GraduationCapIcon };

package/icons/icons/grip-horizontal.tsx

@@ -0,0 +1,131 @@
+"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 GripHorizontalIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GripHorizontalIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CIRCLES = [
+  { cx: 5, cy: 9 },
+  { cx: 12, cy: 9 },
+  { cx: 19, cy: 9 },
+  { cx: 5, cy: 15 },
+  { cx: 12, cy: 15 },
+  { cx: 19, cy: 15 },
+];
+
+const VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    scale: 1,
+    transition: { duration: 0.25, ease: "easeOut" },
+  },
+  animate: (index: number) => {
+    const row = Math.floor(index / 3);
+    const col = index % 3;
+
+    const delay = col * 0.15 + row * 0.25;
+
+    return {
+      opacity: [1, 0.4, 1],
+      scale: [1, 0.85, 1],
+      transition: {
+        delay,
+        duration: 1,
+        ease: "easeInOut",
+      },
+    };
+  },
+};
+
+const GripHorizontalIcon = forwardRef<
+  GripHorizontalIconHandle,
+  GripHorizontalIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+  const isAnimatingRef = useRef(false);
+
+  const startAnimation = useCallback(async () => {
+    if (isAnimatingRef.current) return;
+    isAnimatingRef.current = true;
+    await controls.start("animate");
+    await controls.start("normal");
+    isAnimatingRef.current = false;
+  }, [controls]);
+
+  const stopAnimation = useCallback(async () => {
+    if (!isAnimatingRef.current) return;
+    await controls.start("normal");
+    isAnimatingRef.current = false;
+  }, [controls]);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return { startAnimation, stopAnimation };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) startAnimation();
+      onMouseEnter?.(e);
+    },
+    [startAnimation, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) stopAnimation();
+      onMouseLeave?.(e);
+    },
+    [stopAnimation, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn("inline-flex items-center justify-center", 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"
+      >
+        {CIRCLES.map((circle, index) => (
+          <motion.circle
+            animate={controls}
+            custom={index}
+            cx={circle.cx}
+            cy={circle.cy}
+            initial="normal"
+            key={`${circle.cx}-${circle.cy}`}
+            r="1"
+            variants={VARIANTS}
+          />
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+GripHorizontalIcon.displayName = "GripHorizontalIcon";
+export { GripHorizontalIcon };

package/icons/icons/grip-vertical.tsx

@@ -0,0 +1,128 @@
+"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 GripVerticalIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GripVerticalIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CIRCLES = [
+  { cx: 9, cy: 5 },
+  { cx: 9, cy: 12 },
+  { cx: 9, cy: 19 },
+  { cx: 15, cy: 5 },
+  { cx: 15, cy: 12 },
+  { cx: 15, cy: 19 },
+];
+
+const ROWS = 3;
+
+const VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    scale: 1,
+    transition: { duration: 0.25, ease: "easeOut" },
+  },
+  animate: (data: { index: number }) => {
+    const row = data.index % ROWS;
+    const col = Math.floor(data.index / ROWS);
+    const delay = row * 0.15 + col * (ROWS * 0.15 - 0.2);
+
+    return {
+      opacity: [1, 0.4, 1],
+      scale: [1, 0.85, 1],
+      transition: { delay, duration: 1, ease: "easeInOut" },
+    };
+  },
+};
+
+const GripVerticalIcon = forwardRef<
+  GripVerticalIconHandle,
+  GripVerticalIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+  const isAnimatingRef = useRef(false);
+
+  const startAnimation = useCallback(async () => {
+    if (isAnimatingRef.current) return;
+    isAnimatingRef.current = true;
+    await controls.start("animate");
+    await controls.start("normal");
+    isAnimatingRef.current = false;
+  }, [controls]);
+
+  const stopAnimation = useCallback(async () => {
+    if (!isAnimatingRef.current) return;
+    await controls.start("normal");
+    isAnimatingRef.current = false;
+  }, [controls]);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return { startAnimation, stopAnimation };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) startAnimation();
+      onMouseEnter?.(e);
+    },
+    [startAnimation, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) stopAnimation();
+      onMouseLeave?.(e);
+    },
+    [stopAnimation, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn("inline-flex items-center justify-center", 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"
+      >
+        {CIRCLES.map((circle, index) => (
+          <motion.circle
+            animate={controls}
+            custom={{ index }}
+            cx={circle.cx}
+            cy={circle.cy}
+            initial="normal"
+            key={`${circle.cx}-${circle.cy}`}
+            r="1"
+            variants={VARIANTS}
+          />
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+GripVerticalIcon.displayName = "GripVerticalIcon";
+export { GripVerticalIcon };

package/icons/icons/grip.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 GripIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GripProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CIRCLES = [
+  { cx: 19, cy: 5 },
+  { cx: 19, cy: 12 },
+  { cx: 12, cy: 5 },
+  { cx: 19, cy: 19 },
+  { cx: 12, cy: 12 },
+  { cx: 5, cy: 5 },
+  { cx: 12, cy: 19 },
+  { cx: 5, cy: 12 },
+  { cx: 5, cy: 19 },
+];
+
+const VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    transition: { duration: 0.25 },
+  },
+  animate: (index: number) => ({
+    opacity: [1, 0.3, 0.3, 1],
+    transition: {
+      delay: index * 0.07,
+      duration: 1.1,
+      times: [0, 0.2, 0.8, 1],
+    },
+  }),
+};
+
+const GripIcon = forwardRef<GripIconHandle, GripProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    const isAnimatingRef = useRef(false);
+
+    const startAnimation = useCallback(async () => {
+      if (isAnimatingRef.current) return;
+      isAnimatingRef.current = true;
+      await controls.start("animate");
+      await controls.start("normal");
+      isAnimatingRef.current = false;
+    }, [controls]);
+
+    const stopAnimation = useCallback(async () => {
+      if (!isAnimatingRef.current) return;
+      await controls.start("normal");
+      isAnimatingRef.current = false;
+    }, [controls]);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return { startAnimation, stopAnimation };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          startAnimation();
+        }
+      },
+      [startAnimation, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          stopAnimation();
+        }
+      },
+      [stopAnimation, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn("inline-flex items-center justify-center", 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"
+        >
+          {CIRCLES.map((circle, index) => (
+            <motion.circle
+              animate={controls}
+              custom={index}
+              cx={circle.cx}
+              cy={circle.cy}
+              initial="normal"
+              key={`${circle.cx}-${circle.cy}`}
+              r="1"
+              variants={VARIANTS}
+            />
+          ))}
+        </svg>
+      </div>
+    );
+  }
+);
+
+GripIcon.displayName = "GripIcon";
+export { GripIcon };