@romansmirnov/doku 1.0.0

package/icons/icons/angry.tsx

@@ -0,0 +1,165 @@
+"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 AngryIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface AngryIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const EYEBROW_ROTATION = 20;
+const DURATION = 0.6;
+
+const PATH_VARIANTS_FACE: Variants = {
+  normal: { scale: 1, rotate: 0 },
+  animate: {
+    scale: [1, 1.2, 1.2, 1.2, 1],
+    rotate: [0, -3, 3, -1, 1, 0],
+    transition: {
+      duration: DURATION,
+      times: [0, 0.2, 0.4, 0.6, 1],
+      ease: "easeInOut",
+    },
+  },
+};
+
+const PATH_VARIANTS_LEFT_EYEBROW: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: [0, EYEBROW_ROTATION, 0],
+    transition: {
+      duration: DURATION + 0.2,
+    },
+  },
+};
+
+const PATH_VARIANTS_RIGHT_EYEBROW: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: [0, -EYEBROW_ROTATION, 0],
+    transition: {
+      duration: DURATION + 0.2,
+    },
+  },
+};
+
+const PATH_VARIANTS_EYE: Variants = {
+  normal: { scale: 1 },
+  animate: {
+    scale: [1, 1.2, 1],
+    transition: {
+      duration: DURATION,
+    },
+  },
+};
+
+const PATH_VARIANTS_MOUTH: Variants = {
+  normal: { translateY: 0 },
+  animate: {
+    translateY: [0, -0.5, 0],
+    transition: {
+      duration: DURATION,
+    },
+  },
+};
+
+const AngryIcon = forwardRef<AngryIconHandle, AngryIconProps>(
+  ({ 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}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={PATH_VARIANTS_FACE}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <motion.path
+            animate={controls}
+            d="M16 16s-1.5-2-4-2-4 2-4 2"
+            variants={PATH_VARIANTS_MOUTH}
+          />
+          <motion.path
+            animate={controls}
+            d="M7.5 8 10 9"
+            variants={PATH_VARIANTS_LEFT_EYEBROW}
+          />
+          <motion.path
+            animate={controls}
+            d="m14 9 2.5-1"
+            variants={PATH_VARIANTS_RIGHT_EYEBROW}
+          />
+          <motion.path
+            animate={controls}
+            d="M9 10h.01"
+            variants={PATH_VARIANTS_EYE}
+          />
+          <motion.path
+            animate={controls}
+            d="M15 10h.01"
+            variants={PATH_VARIANTS_EYE}
+          />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+AngryIcon.displayName = "AngryIcon";
+
+export { AngryIcon };

package/icons/icons/annoyed.tsx

@@ -0,0 +1,163 @@
+"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 AnnoyedIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface AnnoyedIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const AnnoyedIcon = forwardRef<AnnoyedIconHandle, AnnoyedIconProps>(
+  ({ 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]
+    );
+
+    const faceVariants: Variants = {
+      normal: {
+        scale: 1,
+        transition: { duration: 0.2, ease: "easeOut" },
+      },
+      animate: {
+        scale: 1.05,
+        transition: {
+          duration: 0.3,
+          ease: "easeOut",
+        },
+      },
+    };
+
+    const mouthVariants: Variants = {
+      normal: {
+        scaleX: 1,
+        y: 0,
+        transition: { duration: 0.2, ease: "easeOut" },
+      },
+      animate: {
+        scaleX: 0.8,
+        y: 1,
+        transition: {
+          duration: 0.3,
+          ease: "easeOut",
+        },
+      },
+    };
+
+    const leftEyebrowVariants: Variants = {
+      normal: {
+        rotate: 0,
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, ease: "easeOut" },
+      },
+      animate: {
+        rotate: 15,
+        y: -1,
+        x: -0.5,
+        transition: {
+          duration: 0.25,
+          ease: "easeOut",
+        },
+      },
+    };
+
+    const rightEyebrowVariants: Variants = {
+      normal: {
+        rotate: 0,
+        y: 0,
+        x: 0,
+        transition: { duration: 0.2, ease: "easeOut" },
+      },
+      animate: {
+        rotate: 15,
+        y: -1,
+        x: 0.5,
+        transition: {
+          duration: 0.25,
+          ease: "easeOut",
+          delay: 0.05,
+        },
+      },
+    };
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          initial="normal"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={faceVariants}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <motion.path
+            animate={controls}
+            d="M8 15h8"
+            initial="normal"
+            variants={mouthVariants}
+          />
+          <motion.path
+            animate={controls}
+            d="M8 9h2"
+            initial="normal"
+            variants={leftEyebrowVariants}
+          />
+          <motion.path
+            animate={controls}
+            d="M14 9h2"
+            initial="normal"
+            variants={rightEyebrowVariants}
+          />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+AnnoyedIcon.displayName = "AnnoyedIcon";
+
+export { AnnoyedIcon };

package/icons/icons/archive.tsx

@@ -0,0 +1,132 @@
+"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 ArchiveIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ArchiveIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RECT_VARIANTS: Variants = {
+  normal: {
+    translateY: 0,
+    transition: {
+      duration: 0.2,
+      type: "spring",
+      stiffness: 200,
+      damping: 25,
+    },
+  },
+  animate: {
+    translateY: -1.5,
+    transition: {
+      duration: 0.2,
+      type: "spring",
+      stiffness: 200,
+      damping: 25,
+    },
+  },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" },
+  animate: { d: "M4 11v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11" },
+};
+
+const SECONDARY_PATH_VARIANTS: Variants = {
+  normal: { d: "M10 12h4" },
+  animate: { d: "M10 15h4" },
+};
+
+const ArchiveIcon = forwardRef<ArchiveIconHandle, ArchiveIconProps>(
+  ({ 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.rect
+            animate={controls}
+            height="5"
+            initial="normal"
+            rx="1"
+            variants={RECT_VARIANTS}
+            width="20"
+            x="2"
+            y="3"
+          />
+          <motion.path
+            animate={controls}
+            d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M10 12h4"
+            variants={SECONDARY_PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ArchiveIcon.displayName = "ArchiveIcon";
+
+export { ArchiveIcon };

package/icons/icons/arrow-big-down-dash.tsx

@@ -0,0 +1,107 @@
+"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 ArrowBigDownDashIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ArrowBigDownDashIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DASH_VARIANTS: Variants = {
+  normal: { translateY: 0 },
+  animate: {
+    translateY: [0, 1, 0],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const ARROW_VARIANTS: Variants = {
+  normal: { translateY: 0 },
+  animate: {
+    translateY: [0, 3, 0],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const ArrowBigDownDashIcon = forwardRef<
+  ArrowBigDownDashIconHandle,
+  ArrowBigDownDashIconProps
+>(({ 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 5H9" variants={DASH_VARIANTS} />
+        <motion.path
+          animate={controls}
+          d="M15 9v3h4l-7 7-7-7h4V9z"
+          variants={ARROW_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ArrowBigDownDashIcon.displayName = "ArrowBigDownDashIcon";
+
+export { ArrowBigDownDashIcon };

package/icons/icons/arrow-big-down.tsx

@@ -0,0 +1,97 @@
+"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 ArrowBigDownIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ArrowBigDownIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "M15 6v6h4l-7 7-7-7h4V6h6z", translateY: 0 },
+  animate: {
+    d: "M15 6v6h4l-7 7-7-7h4V6h6z",
+    translateY: [0, +3, 0],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const ArrowBigDownIcon = forwardRef<
+  ArrowBigDownIconHandle,
+  ArrowBigDownIconProps
+>(({ 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 6v6h4l-7 7-7-7h4V6h6z"
+          variants={PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ArrowBigDownIcon.displayName = "ArrowBigDownIcon";
+
+export { ArrowBigDownIcon };