@romansmirnov/doku 1.0.0

package/icons/icons/message-circle-dashed.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 MessageCircleDashedIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MessageCircleDashedIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: (i: number) => ({
+    opacity: [0, 1],
+    transition: { delay: i * 0.1, duration: 0.3 },
+  }),
+};
+
+const MessageCircleDashedIcon = forwardRef<
+  MessageCircleDashedIconHandle,
+  MessageCircleDashedIconProps
+>(({ 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"
+      >
+        {[
+          "M13.5 3.1c-.5 0-1-.1-1.5-.1s-1 .1-1.5.1",
+          "M19.3 6.8a10.45 10.45 0 0 0-2.1-2.1",
+          "M20.9 13.5c.1-.5.1-1 .1-1.5s-.1-1-.1-1.5",
+          "M17.2 19.3a10.45 10.45 0 0 0 2.1-2.1",
+          "M10.5 20.9c.5.1 1 .1 1.5.1s1-.1 1.5-.1",
+          "M3.5 17.5 2 22l4.5-1.5",
+          "M3.1 10.5c0 .5-.1 1-.1 1.5s.1 1 .1 1.5",
+          "M6.8 4.7a10.45 10.45 0 0 0-2.1 2.1",
+        ].map((d, index) => (
+          <motion.path
+            animate={controls}
+            custom={index + 1}
+            d={d}
+            key={d}
+            variants={PATH_VARIANTS}
+          />
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+MessageCircleDashedIcon.displayName = "MessageCircleDashedIcon";
+
+export { MessageCircleDashedIcon };

package/icons/icons/message-circle-more.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 MessageCircleMoreIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MessageCircleMoreIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DOT_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: (custom: number) => ({
+    opacity: [1, 0, 0, 1, 1, 0, 0, 1],
+    transition: {
+      opacity: {
+        times: [
+          0,
+          0.1,
+          0.1 + custom * 0.1,
+          0.1 + custom * 0.1 + 0.1,
+          0.5,
+          0.6,
+          0.6 + custom * 0.1,
+          0.6 + custom * 0.1 + 0.1,
+        ],
+        duration: 1.5,
+      },
+    },
+  }),
+};
+
+const MessageCircleMoreIcon = forwardRef<
+  MessageCircleMoreIconHandle,
+  MessageCircleMoreIconProps
+>(({ 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="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+        <motion.path
+          animate={controls}
+          custom={0}
+          d="M8 12h.01"
+          variants={DOT_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={1}
+          d="M12 12h.01"
+          variants={DOT_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={2}
+          d="M16 12h.01"
+          variants={DOT_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+MessageCircleMoreIcon.displayName = "MessageCircleMoreIcon";
+
+export { MessageCircleMoreIcon };

package/icons/icons/message-circle-plus.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 MessageCirclePlusIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MessageCirclePlusIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PLUS_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut" },
+      opacity: { duration: 0.4, ease: "easeInOut" },
+    },
+  },
+};
+
+const PLUS_HORIZONTAL_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut", delay: 0.2 },
+      opacity: { duration: 0.4, ease: "easeInOut", delay: 0.2 },
+    },
+  },
+};
+
+const MessageCirclePlusIcon = forwardRef<
+  MessageCirclePlusIconHandle,
+  MessageCirclePlusIconProps
+>(({ 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="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
+        <motion.path
+          animate={controls}
+          d="M12 8v8"
+          initial="normal"
+          variants={PLUS_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M8 12h8"
+          initial="normal"
+          variants={PLUS_HORIZONTAL_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+MessageCirclePlusIcon.displayName = "MessageCirclePlusIcon";
+
+export { MessageCirclePlusIcon };

package/icons/icons/message-circle-x.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 MessageCircleXIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MessageCircleXIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const FIRST_LINE_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut" },
+      opacity: { duration: 0.4, ease: "easeInOut" },
+    },
+  },
+};
+
+const SECOND_LINE_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut", delay: 0.2 },
+      opacity: { duration: 0.4, ease: "easeInOut", delay: 0.2 },
+    },
+  },
+};
+
+const MessageCircleXIcon = forwardRef<
+  MessageCircleXIconHandle,
+  MessageCircleXIconProps
+>(({ 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="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
+        <motion.path
+          animate={controls}
+          d="m15 9-6 6"
+          initial="normal"
+          variants={FIRST_LINE_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="m9 9 6 6"
+          initial="normal"
+          variants={SECOND_LINE_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+MessageCircleXIcon.displayName = "MessageCircleXIcon";
+
+export { MessageCircleXIcon };

package/icons/icons/message-circle.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 MessageCircleIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MessageCircleIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ICON_VARIANTS: Variants = {
+  normal: {
+    scale: 1,
+    rotate: 0,
+  },
+  animate: {
+    scale: 1.05,
+    rotate: [0, -7, 7, 0],
+    transition: {
+      rotate: {
+        duration: 0.5,
+        ease: "easeInOut",
+      },
+      scale: {
+        type: "spring",
+        stiffness: 400,
+        damping: 10,
+      },
+    },
+  },
+};
+
+const MessageCircleIcon = forwardRef<
+  MessageCircleIconHandle,
+  MessageCircleIconProps
+>(({ 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={ICON_VARIANTS}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+      </motion.svg>
+    </div>
+  );
+});
+
+MessageCircleIcon.displayName = "MessageCircleIcon";
+
+export { MessageCircleIcon };

package/icons/icons/message-square-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 MessageSquareCheckIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MessageSquareCheckIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CHECK_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut" },
+      opacity: { duration: 0.4, ease: "easeInOut" },
+    },
+  },
+};
+
+const MessageSquareCheckIcon = forwardRef<
+  MessageSquareCheckIconHandle,
+  MessageSquareCheckIconProps
+>(({ 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="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.7.7 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" />
+        <motion.path
+          animate={controls}
+          d="m9 11 2 2 4-4"
+          initial="normal"
+          style={{ transformOrigin: "center" }}
+          variants={CHECK_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+MessageSquareCheckIcon.displayName = "MessageSquareCheckIcon";
+
+export { MessageSquareCheckIcon };