@romansmirnov/doku 1.0.0

package/icons/icons/arrow-down.tsx

@@ -0,0 +1,112 @@
+"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 ArrowDownIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ArrowDownIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "m19 12-7 7-7-7", translateY: 0 },
+  animate: {
+    d: "m19 12-7 7-7-7",
+    translateY: [0, -3, 0],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const SECOND_PATH_VARIANTS: Variants = {
+  normal: { d: "M12 5v14" },
+  animate: {
+    d: ["M12 5v14", "M12 5v9", "M12 5v14"],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const ArrowDownIcon = forwardRef<ArrowDownIconHandle, ArrowDownIconProps>(
+  ({ 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="m19 12-7 7-7-7"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M12 5v14"
+            variants={SECOND_PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ArrowDownIcon.displayName = "ArrowDownIcon";
+
+export { ArrowDownIcon };

package/icons/icons/arrow-left.tsx

@@ -0,0 +1,112 @@
+"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 ArrowLeftIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ArrowLeftIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "m12 19-7-7 7-7", translateX: 0 },
+  animate: {
+    d: "m12 19-7-7 7-7",
+    translateX: [0, 3, 0],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const SECOND_PATH_VARIANTS: Variants = {
+  normal: { d: "M19 12H5" },
+  animate: {
+    d: ["M19 12H5", "M19 12H10", "M19 12H5"],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const ArrowLeftIcon = forwardRef<ArrowLeftIconHandle, ArrowLeftIconProps>(
+  ({ 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="m12 19-7-7 7-7"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M19 12H5"
+            variants={SECOND_PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ArrowLeftIcon.displayName = "ArrowLeftIcon";
+
+export { ArrowLeftIcon };

package/icons/icons/arrow-right.tsx

@@ -0,0 +1,112 @@
+"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 ArrowRightIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ArrowRightIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "M5 12h14" },
+  animate: {
+    d: ["M5 12h14", "M5 12h9", "M5 12h14"],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const SECONDARY_PATH_VARIANTS: Variants = {
+  normal: { d: "m12 5 7 7-7 7", translateX: 0 },
+  animate: {
+    d: "m12 5 7 7-7 7",
+    translateX: [0, -3, 0],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const ArrowRightIcon = forwardRef<ArrowRightIconHandle, ArrowRightIconProps>(
+  ({ 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="M5 12h14"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m12 5 7 7-7 7"
+            variants={SECONDARY_PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ArrowRightIcon.displayName = "ArrowRightIcon";
+
+export { ArrowRightIcon };

package/icons/icons/arrow-up-left.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 ArrowUpLeftIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ArrowUpLeftIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ARROW_VARIANTS: Variants = {
+  normal: {
+    scale: 1,
+    translateX: 0,
+    translateY: 0,
+  },
+  animate: {
+    scale: [1, 0.85, 1],
+    translateX: [0, 4, 0],
+    translateY: [0, 4, 0],
+    originX: 0,
+    originY: 0,
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const ArrowUpLeftIcon = forwardRef<ArrowUpLeftIconHandle, ArrowUpLeftIconProps>(
+  ({ 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) controls.start("animate");
+        onMouseEnter?.(e);
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) controls.start("normal");
+        onMouseLeave?.(e);
+      },
+      [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} variants={ARROW_VARIANTS}>
+            <path d="M7 7H17" />
+            <path d="M7 7V17" />
+            <path d="M17 17L7 7" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+ArrowUpLeftIcon.displayName = "ArrowUpLeftIcon";
+
+export { ArrowUpLeftIcon };

package/icons/icons/arrow-up-right.tsx

@@ -0,0 +1,99 @@
+"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 ArrowUpRightIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ArrowUpRightIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ARROW_VARIANTS: Variants = {
+  normal: {
+    scale: 1,
+    translateX: 0,
+    translateY: 0,
+  },
+  animate: {
+    scale: [1, 0.85, 1],
+    translateX: [0, -4, 0],
+    translateY: [0, 4, 0],
+    originX: 1,
+    originY: 0,
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const ArrowUpRightIcon = forwardRef<
+  ArrowUpRightIconHandle,
+  ArrowUpRightIconProps
+>(({ 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) controls.start("animate");
+      onMouseEnter?.(e);
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isControlledRef.current) controls.start("normal");
+      onMouseLeave?.(e);
+    },
+    [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} variants={ARROW_VARIANTS}>
+          <path d="M7 7H17" />
+          <path d="M17 7V17" />
+          <path d="M7 17L17 7" />
+        </motion.g>
+      </svg>
+    </div>
+  );
+});
+
+ArrowUpRightIcon.displayName = "ArrowUpRightIcon";
+
+export { ArrowUpRightIcon };

package/icons/icons/arrow-up.tsx

@@ -0,0 +1,112 @@
+"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 ArrowUpIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ArrowUpIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "m5 12 7-7 7 7", translateY: 0 },
+  animate: {
+    d: "m5 12 7-7 7 7",
+    translateY: [0, 3, 0],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const SECOND_PATH_VARIANTS: Variants = {
+  normal: { d: "M12 19V5" },
+  animate: {
+    d: ["M12 19V5", "M12 19V10", "M12 19V5"],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const ArrowUpIcon = forwardRef<ArrowUpIconHandle, ArrowUpIconProps>(
+  ({ 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="m5 12 7-7 7 7"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M12 19V5"
+            variants={SECOND_PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ArrowUpIcon.displayName = "ArrowUpIcon";
+
+export { ArrowUpIcon };