@romansmirnov/doku 1.0.0

package/icons/icons/bookmark.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 BookmarkIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BookmarkIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BOOKMARK_VARIANTS: Variants = {
+  normal: { scaleY: 1, scaleX: 1 },
+  animate: {
+    scaleY: [1, 1.3, 0.9, 1.05, 1],
+    scaleX: [1, 0.9, 1.1, 0.95, 1],
+    transition: {
+      duration: 0.6,
+      ease: "easeOut",
+    },
+  },
+};
+
+const BookmarkIcon = forwardRef<BookmarkIconHandle, BookmarkIconProps>(
+  ({ className, size = 28, onMouseEnter, onMouseLeave, ...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 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
+            style={{ originY: 0.5, originX: 0.5 }}
+            variants={BOOKMARK_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BookmarkIcon.displayName = "BookmarkIcon";
+
+export { BookmarkIcon };

package/icons/icons/bot-message-square.tsx

@@ -0,0 +1,172 @@
+"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 BotMessageSquareHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BotMessageSquareProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+export const BotMessageSquareIcon = forwardRef<
+  BotMessageSquareHandle,
+  BotMessageSquareProps
+>(({ className, onMouseEnter, onMouseLeave, 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("inline-flex items-center justify-center", 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={{
+          normal: { rotate: 0, y: 0, scale: 1 },
+          animate: {
+            rotate: [0, -3, 3, 0, 0],
+            y: [0, 1.5, -1.5, 0],
+            scale: [1, 1.03, 1],
+            transition: {
+              duration: 1,
+              ease: "easeInOut",
+              repeat: 0,
+            },
+          },
+        }}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M12 6V2H8" />
+        <path d="M2 12h2" />
+        <path d="M20 12h2" />
+        <motion.path
+          d="M20 16a2 2 0 0 1-2 2H8.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 4 20.286V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"
+          variants={{
+            normal: { scale: 1, originX: 0.5, originY: 0.5 },
+            animate: {
+              scale: [1, 1.04, 1],
+              transition: {
+                duration: 0.6,
+                ease: "easeInOut",
+                repeat: 1,
+              },
+            },
+          }}
+        />
+        <motion.path
+          d="M9 11v2"
+          variants={{
+            normal: { scaleY: 1, originY: 0.5 },
+            animate: {
+              scaleY: [1, 0.1, 1],
+              transition: { duration: 0.4, ease: "easeInOut", delay: 0.1 },
+            },
+          }}
+        />
+        <motion.path
+          d="M15 11v2"
+          variants={{
+            normal: { scaleY: 1, originY: 0.5 },
+            animate: {
+              scaleY: [1, 0.1, 1],
+              transition: { duration: 0.4, ease: "easeInOut", delay: 0.2 },
+            },
+          }}
+        />
+        <motion.circle
+          cx="10"
+          cy="18"
+          r="0.5"
+          variants={{
+            normal: { opacity: 0 },
+            animate: {
+              opacity: [0.3, 1, 0.3],
+              transition: {
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 1.2,
+                delay: 0,
+              },
+            },
+          }}
+        />
+        <motion.circle
+          cx="12"
+          cy="18"
+          r="0.5"
+          variants={{
+            normal: { opacity: 0 },
+            animate: {
+              opacity: [0.3, 1, 0.3],
+              transition: {
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 1.2,
+                delay: 0.3,
+              },
+            },
+          }}
+        />
+        <motion.circle
+          cx="14"
+          cy="18"
+          r="0.5"
+          variants={{
+            normal: { opacity: 0 },
+            animate: {
+              opacity: [0.3, 1, 0.3],
+              transition: {
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 1.2,
+                delay: 0.6,
+              },
+            },
+          }}
+        />
+      </motion.svg>
+    </div>
+  );
+});
+
+BotMessageSquareIcon.displayName = "BotMessageSquareIcon";

package/icons/icons/bot.tsx

@@ -0,0 +1,122 @@
+"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 BotIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BotIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BotIcon = forwardRef<BotIconHandle, BotIconProps>(
+  ({ 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="M12 8V4H8" />
+          <rect height="12" rx="2" width="16" x="4" y="8" />
+          <path d="M2 14h2" />
+          <path d="M20 14h2" />
+
+          <motion.line
+            animate={controls}
+            initial="normal"
+            variants={{
+              normal: { y1: 13, y2: 15 },
+              animate: {
+                y1: [13, 14, 13],
+                y2: [15, 14, 15],
+                transition: {
+                  duration: 0.5,
+                  ease: "easeInOut",
+                  delay: 0.2,
+                },
+              },
+            }}
+            x1={15}
+            x2={15}
+          />
+
+          <motion.line
+            animate={controls}
+            initial="normal"
+            variants={{
+              normal: { y1: 13, y2: 15 },
+              animate: {
+                y1: [13, 14, 13],
+                y2: [15, 14, 15],
+                transition: {
+                  duration: 0.5,
+                  ease: "easeInOut",
+                  delay: 0.2,
+                },
+              },
+            }}
+            x1={9}
+            x2={9}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BotIcon.displayName = "Bot";
+
+export { BotIcon };

package/icons/icons/box.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 BoxIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BoxIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.3,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const BoxIcon = forwardRef<BoxIconHandle, BoxIconProps>(
+  ({ 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 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m3.3 7 8.7 5 8.7-5"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M12 22V12"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BoxIcon.displayName = "BoxIcon";
+
+export { BoxIcon };

package/icons/icons/boxes.tsx

@@ -0,0 +1,105 @@
+"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 BoxesIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BoxesIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BoxesIcon = forwardRef<BoxesIconHandle, BoxesIconProps>(
+  ({ 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.path
+            animate={controls}
+            d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z m4.03 3.58 -4.74 -2.85 m4.74 2.85 5-3 m-5 3v5.17"
+            variants={{
+              normal: { translateX: 0, translateY: 0 },
+              animate: { translateX: -1.5, translateY: 1.5 },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z m5 3-5-3 m5 3 4.74-2.85 M17 16.5v5.17"
+            variants={{
+              normal: { translateX: 0, translateY: 0 },
+              animate: { translateX: 1.5, translateY: 1.5 },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z M12 8 7.26 5.15 m4.74 2.85 4.74-2.85 M12 13.5V8"
+            variants={{
+              normal: { translateX: 0, translateY: 0 },
+              animate: { translateX: 0, translateY: -1.5 },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BoxesIcon.displayName = "BoxesIcon";
+
+export { BoxesIcon };