@romansmirnov/doku 1.0.0

package/icons/icons/chart-pie.tsx

@@ -0,0 +1,98 @@
+"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 ChartPieIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChartPieIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { translateX: 0, translateY: 0 },
+  animate: { translateX: 1.1, translateY: -1.1 },
+};
+
+const ChartPieIcon = forwardRef<ChartPieIconHandle, ChartPieIconProps>(
+  ({ 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 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"
+            transition={{
+              type: "spring",
+              stiffness: 250,
+              damping: 15,
+              bounce: 0.6,
+            }}
+            variants={PATH_VARIANTS}
+          />
+          <path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ChartPieIcon.displayName = "ChartPieIcon";
+
+export { ChartPieIcon };

package/icons/icons/chart-scatter.tsx

@@ -0,0 +1,146 @@
+"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 ChartScatterIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChartScatterIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DOT_VARIANTS: Variants = {
+  visible: (i: number) => ({
+    opacity: 1,
+    transition: {
+      delay: i * 0.15,
+      duration: 0.3,
+    },
+  }),
+  hidden: {
+    opacity: 0,
+    transition: {
+      duration: 0.2,
+    },
+  },
+  default: { opacity: 1 },
+};
+
+const ChartScatterIcon = forwardRef<
+  ChartScatterIconHandle,
+  ChartScatterIconProps
+>(({ 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("hidden");
+        await controls.start("visible");
+      },
+      stopAnimation: async () => controls.start("default"),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    async (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        await controls.start("hidden");
+        await controls.start("visible");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    async (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        await controls.start("default");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <motion.svg
+        animate={controls}
+        fill="none"
+        height={size}
+        initial="default"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <motion.circle
+          custom={0}
+          cx="7.5"
+          cy="7.5"
+          fill="currentColor"
+          r=".5"
+          variants={DOT_VARIANTS}
+        />
+        <motion.circle
+          custom={1}
+          cx="18.5"
+          cy="5.5"
+          fill="currentColor"
+          r=".5"
+          variants={DOT_VARIANTS}
+        />
+        <motion.circle
+          custom={2}
+          cx="11.5"
+          cy="11.5"
+          fill="currentColor"
+          r=".5"
+          variants={DOT_VARIANTS}
+        />
+        <motion.circle
+          custom={3}
+          cx="7.5"
+          cy="16.5"
+          fill="currentColor"
+          r=".5"
+          variants={DOT_VARIANTS}
+        />
+        <motion.circle
+          custom={4}
+          cx="17.5"
+          cy="14.5"
+          fill="currentColor"
+          r=".5"
+          variants={DOT_VARIANTS}
+        />
+        <path d="M3 3v16a2 2 0 0 0 2 2h16" strokeWidth="2" />
+      </motion.svg>
+    </div>
+  );
+});
+
+ChartScatterIcon.displayName = "ChartScatterIcon";
+
+export { ChartScatterIcon };

package/icons/icons/chart-spline.tsx

@@ -0,0 +1,103 @@
+"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 ChartSplineIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChartSplineIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      delay: 0.15,
+      duration: 0.3,
+      opacity: { delay: 0.1 },
+    },
+  },
+};
+
+const ChartSplineIcon = forwardRef<ChartSplineIconHandle, ChartSplineIconProps>(
+  ({ 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"
+        >
+          <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+          <motion.path
+            animate={controls}
+            d="M7 16c.5-2 1.5-7 4-7 2 0 2 3 4 3 2.5 0 4.5-5 5-7"
+            variants={VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ChartSplineIcon.displayName = "ChartSplineIcon";
+
+export { ChartSplineIcon };

package/icons/icons/check-check.tsx

@@ -0,0 +1,117 @@
+"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 CheckCheckIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CheckCheckIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    scale: 1,
+    transition: {
+      duration: 0.3,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: (custom: number) => ({
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    scale: [0.5, 1],
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+      delay: 0.1 * custom,
+    },
+  }),
+};
+
+const CheckCheckIcon = forwardRef<CheckCheckIconHandle, CheckCheckIconProps>(
+  ({ 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}
+            custom={0}
+            d="M2 12 7 17L18 6"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={1}
+            d="M13 16L14.5 17.5L22 10"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+CheckCheckIcon.displayName = "CheckCheckIcon";
+
+export { CheckCheckIcon };

package/icons/icons/check.tsx

@@ -0,0 +1,108 @@
+"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 CheckIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CheckIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    scale: 1,
+    transition: {
+      duration: 0.3,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    scale: [0.5, 1],
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const CheckIcon = forwardRef<CheckIconHandle, CheckIconProps>(
+  ({ 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="M4 12 9 17L20 6"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+CheckIcon.displayName = "CheckIcon";
+
+export { CheckIcon };

package/icons/icons/chess-bishop.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { motion, useAnimation, type Variants } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface ChessBishopIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChessBishopIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BISHOP_VARIANTS: Variants = {
+  normal: {
+    x: 0,
+    y: 0,
+    rotate: 0,
+    opacity: 1,
+    transition: { type: "spring", stiffness: 220, damping: 18 },
+  },
+  animate: {
+    x: [0, -6, -6, -6, 6, 6, 6, 0],
+    y: [0, -6, -6, -6, 6, 6, 6, 0],
+    rotate: [0, -16, -16, -16, 16, 16, 4, 0],
+    opacity: [1, 1, 0, 0, 0, 0, 1, 1],
+    transition: {
+      duration: 1.4,
+      times: [0, 0.28, 0.38, 0.45, 0.5, 0.58, 0.72, 1],
+      ease: "easeInOut",
+    },
+  },
+};
+
+const ChessBishopIcon = forwardRef<ChessBishopIconHandle, ChessBishopIconProps>(
+  ({ 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"
+          style={{ overflow: "visible" }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.g
+            animate={controls}
+            initial="normal"
+            style={{ transformBox: "view-box", transformOrigin: "12px 12px" }}
+            variants={BISHOP_VARIANTS}
+          >
+            <path d="M5 20a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" />
+            <path d="M15 18c1.5-.615 3-2.461 3-4.923C18 8.769 14.5 4.462 12 2 9.5 4.462 6 8.77 6 13.077 6 15.539 7.5 17.385 9 18" />
+            <path d="m16 7-2.5 2.5" />
+            <path d="M9 2h6" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+ChessBishopIcon.displayName = "ChessBishopIcon";
+
+export { ChessBishopIcon };