@romansmirnov/doku 1.0.0

package/icons/icons/bone.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 BoneIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BoneIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: [0, -8, 8, -6, 0],
+    transition: {
+      ease: "circIn",
+      rotate: {
+        duration: 0.5,
+      },
+    },
+  },
+};
+
+const BoneIcon = forwardRef<BoneIconHandle, BoneIconProps>(
+  ({ 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 10c.7-.7 1.69 0 2.5 0a2.5 2.5 0 1 0 0-5 .5.5 0 0 1-.5-.5 2.5 2.5 0 1 0-5 0c0 .81.7 1.8 0 2.5l-7 7c-.7.7-1.69 0-2.5 0a2.5 2.5 0 0 0 0 5c.28 0 .5.22.5.5a2.5 2.5 0 1 0 5 0c0-.81-.7-1.8 0-2.5Z"
+            variants={VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BoneIcon.displayName = "BoneIcon";
+
+export { BoneIcon };

package/icons/icons/book-text.tsx

@@ -0,0 +1,101 @@
+"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 BookTextIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BookTextIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BookTextIcon = forwardRef<BookTextIconHandle, BookTextIconProps>(
+  ({ 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={{
+            animate: {
+              scale: [1, 1.04, 1],
+              rotate: [0, -8, 8, -8, 0],
+              y: [0, -2, 0],
+              transition: {
+                duration: 0.6,
+                ease: "easeInOut",
+                times: [0, 0.2, 0.5, 0.8, 1],
+              },
+            },
+            normal: {
+              scale: 1,
+              rotate: 0,
+              y: 0,
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+          <path d="M8 11h8" />
+          <path d="M8 7h6" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+BookTextIcon.displayName = "BookTextIcon";
+
+export { BookTextIcon };

package/icons/icons/bookmark-check.tsx

@@ -0,0 +1,120 @@
+"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 BookmarkCheckIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BookmarkCheckIconProps 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 CHECK_VARIANTS: Variants = {
+  normal: { opacity: 1, strokeDashoffset: 0 },
+  animate: {
+    strokeDashoffset: [1, 0],
+    opacity: [0, 1],
+    transition: {
+      duration: 0.3,
+      ease: "easeOut",
+    },
+  },
+};
+
+const BookmarkCheckIcon = forwardRef<
+  BookmarkCheckIconHandle,
+  BookmarkCheckIconProps
+>(({ 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 2Z"
+          style={{ originX: 0.5, originY: 0.5 }}
+          variants={BOOKMARK_VARIANTS}
+        />
+
+        <motion.path
+          animate={controls}
+          d="m9 10 2 2 4-4"
+          initial="normal"
+          pathLength="1"
+          strokeDasharray="1 1"
+          variants={CHECK_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+BookmarkCheckIcon.displayName = "BookmarkCheckIcon";
+
+export { BookmarkCheckIcon };

package/icons/icons/bookmark-minus.tsx

@@ -0,0 +1,123 @@
+"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 BookmarkMinusIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BookmarkMinusIconProps 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 MINUS_VARIANTS: Variants = {
+  normal: { strokeDashoffset: 0, opacity: 1 },
+  animate: {
+    strokeDashoffset: [1, 0],
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+      ease: "easeOut",
+    },
+  },
+};
+
+const BookmarkMinusIcon = forwardRef<
+  BookmarkMinusIconHandle,
+  BookmarkMinusIconProps
+>(({ 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={{ originX: 0.5, originY: 0.5 }}
+          variants={BOOKMARK_VARIANTS}
+        />
+
+        <motion.line
+          animate={controls}
+          initial="normal"
+          pathLength="1"
+          strokeDasharray="1 1"
+          variants={MINUS_VARIANTS}
+          x1="15"
+          x2="9"
+          y1="10"
+          y2="10"
+        />
+      </svg>
+    </div>
+  );
+});
+
+BookmarkMinusIcon.displayName = "BookmarkMinusIcon";
+
+export { BookmarkMinusIcon };

package/icons/icons/bookmark-plus.tsx

@@ -0,0 +1,137 @@
+"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 BookmarkPlusIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BookmarkPlusIconProps 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 PLUS_LINE_VARIANTS: Variants = {
+  normal: { strokeDashoffset: 0, opacity: 1 },
+  animate: (i: number) => ({
+    strokeDashoffset: [1, 0],
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+      ease: "easeOut",
+      delay: i * 0.1,
+    },
+  }),
+};
+
+const BookmarkPlusIcon = forwardRef<
+  BookmarkPlusIconHandle,
+  BookmarkPlusIconProps
+>(({ 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={{ originX: 0.5, originY: 0.5 }}
+          variants={BOOKMARK_VARIANTS}
+        />
+
+        <motion.line
+          animate={controls}
+          custom={0}
+          initial="normal"
+          pathLength="1"
+          strokeDasharray="1 1"
+          variants={PLUS_LINE_VARIANTS}
+          x1="12"
+          x2="12"
+          y1="7"
+          y2="13"
+        />
+        <motion.line
+          animate={controls}
+          custom={1}
+          initial="normal"
+          pathLength="1"
+          strokeDasharray="1 1"
+          variants={PLUS_LINE_VARIANTS}
+          x1="15"
+          x2="9"
+          y1="10"
+          y2="10"
+        />
+      </svg>
+    </div>
+  );
+});
+
+BookmarkPlusIcon.displayName = "BookmarkPlusIcon";
+
+export { BookmarkPlusIcon };

package/icons/icons/bookmark-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 BookmarkXIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BookmarkXIconProps 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 X_LINE_VARIANTS: Variants = {
+  normal: { strokeDashoffset: 0, opacity: 1 },
+  animate: (i: number) => ({
+    strokeDashoffset: [1, 0],
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+      ease: "easeOut",
+      delay: i * 0.1,
+    },
+  }),
+};
+
+const BookmarkXIcon = forwardRef<BookmarkXIconHandle, BookmarkXIconProps>(
+  ({ 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 2Z"
+            style={{ originX: 0.5, originY: 0.5 }}
+            variants={BOOKMARK_VARIANTS}
+          />
+
+          <motion.path
+            animate={controls}
+            custom={0}
+            d="m14.5 7.5-5 5"
+            initial="normal"
+            pathLength="1"
+            strokeDasharray="1 1"
+            variants={X_LINE_VARIANTS}
+          />
+
+          <motion.path
+            animate={controls}
+            custom={1}
+            d="m9.5 7.5 5 5"
+            initial="normal"
+            pathLength="1"
+            strokeDasharray="1 1"
+            variants={X_LINE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BookmarkXIcon.displayName = "BookmarkXIcon";
+
+export { BookmarkXIcon };