@romansmirnov/doku 1.0.0

package/icons/icons/chess-king.tsx

@@ -0,0 +1,113 @@
+"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 ChessKingIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChessKingIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const KING_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    y: 0,
+    transition: {
+      type: "spring",
+      stiffness: 160,
+      damping: 14,
+    },
+  },
+  animate: {
+    rotate: [0, -10, 10, -6, 6, -2, 0],
+    y: [0, -3, -3, -2, -2, -1, 0],
+    transition: {
+      duration: 1.1,
+      times: [0, 0.18, 0.38, 0.55, 0.7, 0.85, 1],
+      ease: "easeInOut",
+    },
+  },
+};
+
+const ChessKingIcon = forwardRef<ChessKingIconHandle, ChessKingIconProps>(
+  ({ 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 22px" }}
+            variants={KING_VARIANTS}
+          >
+            <path d="M4 20a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z" />
+            <path d="m6.7 18-1-1C4.35 15.682 3 14.09 3 12a5 5 0 0 1 4.95-5c1.584 0 2.7.455 4.05 1.818C13.35 7.455 14.466 7 16.05 7A5 5 0 0 1 21 12c0 2.082-1.359 3.673-2.7 5l-1 1" />
+            <path d="M10 4h4" />
+            <path d="M12 2v6.818" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+ChessKingIcon.displayName = "ChessKingIcon";
+
+export { ChessKingIcon };

package/icons/icons/chess-knight.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { motion, useAnimation, type Variants } from "motion/react";
+import type { HTMLAttributes, MouseEvent } from "react";
+import { forwardRef, useCallback, useImperativeHandle } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface ChessKnightIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChessKnightIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const KNIGHT_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    y: 0,
+    transition: {
+      type: "spring",
+      stiffness: 220,
+      damping: 12,
+    },
+  },
+  animate: {
+    rotate: [0, 12, 38, 42, 38, 10, -5, 0],
+    y: [0, -2, -9, -12, -9, -2, 1, 0],
+    transition: {
+      duration: 0.9,
+      times: [0, 0.1, 0.3, 0.45, 0.6, 0.78, 0.9, 1],
+      ease: "easeInOut",
+    },
+  },
+};
+
+const ChessKnightIcon = forwardRef<ChessKnightIconHandle, ChessKnightIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlled = !!ref;
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      }),
+      [controls]
+    );
+
+    const handleMouseEnter = useCallback(
+      (e: MouseEvent<HTMLDivElement>) => {
+        if (isControlled) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, isControlled, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: MouseEvent<HTMLDivElement>) => {
+        if (isControlled) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, isControlled, 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 22px" }}
+            variants={KNIGHT_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="M16.5 18c1-2 2.5-5 2.5-9a7 7 0 0 0-7-7H6.635a1 1 0 0 0-.768 1.64L7 5l-2.32 5.802a2 2 0 0 0 .95 2.526l2.87 1.456" />
+            <path d="m15 5 1.425-1.425" />
+            <path d="m17 8 1.53-1.53" />
+            <path d="M9.713 12.185 7 18" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+ChessKnightIcon.displayName = "ChessKnightIcon";
+
+export { ChessKnightIcon };

package/icons/icons/chess-pawn.tsx

@@ -0,0 +1,150 @@
+"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 ChessPawnIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChessPawnIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HEAD_VARIANTS: Variants = {
+  normal: {
+    x: 0,
+    y: 0,
+    scale: 1,
+    rotate: 0,
+    transition: {
+      type: "spring",
+      stiffness: 180,
+      damping: 16,
+    },
+  },
+  animate: {
+    x: [0, -5, 5, 0],
+    rotate: [0, -15, 15, 0],
+    transition: {
+      duration: 2.4,
+      times: [0, 0.33, 0.66, 1],
+      ease: "easeInOut",
+    },
+  },
+};
+
+const BODY_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    transition: {
+      type: "spring",
+      stiffness: 260,
+      damping: 16,
+    },
+  },
+  animate: {
+    rotate: [0, 5, 5, 5, 3, 0],
+    transition: {
+      duration: 1.8,
+      times: [0, 0.08, 0.3, 0.52, 0.72, 1],
+      ease: "easeInOut",
+    },
+  },
+};
+
+const ChessPawnIcon = forwardRef<ChessPawnIconHandle, ChessPawnIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const headControls = useAnimation();
+    const bodyControls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => {
+          headControls.start("animate");
+          bodyControls.start("animate");
+        },
+        stopAnimation: () => {
+          headControls.start("normal");
+          bodyControls.start("normal");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          headControls.start("animate");
+          bodyControls.start("animate");
+        }
+      },
+      [headControls, bodyControls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          headControls.start("normal");
+          bodyControls.start("normal");
+        }
+      },
+      [headControls, bodyControls, 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={bodyControls}
+            initial="normal"
+            style={{ transformBox: "view-box", transformOrigin: "12px 21px" }}
+            variants={BODY_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="m14.5 10 1.5 8" />
+            <path d="M7 10h10" />
+            <path d="m8 18 1.5-8" />
+          </motion.g>
+          <motion.circle
+            animate={headControls}
+            cx="12"
+            cy="6"
+            initial="normal"
+            r="4"
+            style={{ transformBox: "fill-box", transformOrigin: "center" }}
+            variants={HEAD_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ChessPawnIcon.displayName = "ChessPawnIcon";
+
+export { ChessPawnIcon };

package/icons/icons/chevron-down.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import type { Transition } 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 ChevronDownIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChevronDownIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const ChevronDownIcon = forwardRef<ChevronDownIconHandle, ChevronDownIconProps>(
+  ({ 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 9 6 6 6-6"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { y: 0 },
+              animate: { y: [0, 2, 0] },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ChevronDownIcon.displayName = "ChevronDownIcon";
+
+export { ChevronDownIcon };

package/icons/icons/chevron-first.tsx

@@ -0,0 +1,102 @@
+"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 ChevronFirstIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChevronFirstIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ChevronFirstIcon = forwardRef<
+  ChevronFirstIconHandle,
+  ChevronFirstIconProps
+>(({ 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="m17 18-6-6 6-6"
+          initial="normal"
+          variants={{
+            normal: {
+              translateX: 0,
+              transition: { duration: 0.3, ease: "easeOut" },
+            },
+            animate: {
+              translateX: [-2, 1, -1, 0],
+              transition: {
+                duration: 0.6,
+                ease: "easeInOut",
+                times: [0, 0.3, 0.7, 1],
+              },
+            },
+          }}
+        />
+
+        <path d="M7 6v12" />
+      </svg>
+    </div>
+  );
+});
+
+ChevronFirstIcon.displayName = "ChevronsDownUpIcon";
+
+export { ChevronFirstIcon };

package/icons/icons/chevron-left.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import type { Transition } 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 ChevronLeftIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChevronLeftIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const ChevronLeftIcon = forwardRef<ChevronLeftIconHandle, ChevronLeftIconProps>(
+  ({ 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="m15 18-6-6 6-6"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { x: 0 },
+              animate: { x: [0, -2, 0] },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ChevronLeftIcon.displayName = "ChevronLeftIcon";
+
+export { ChevronLeftIcon };