@romansmirnov/doku 1.0.0

package/icons/icons/folder-dot.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 FolderDotIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderDotIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DOT_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: {
+    opacity: [1, 0, 1],
+    transition: { duration: 0.6, ease: "easeInOut" },
+  },
+};
+
+const FolderDotIcon = forwardRef<FolderDotIconHandle, FolderDotIconProps>(
+  ({ 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="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z" />
+          <motion.circle
+            animate={controls}
+            cx="12"
+            cy="13"
+            initial="normal"
+            r="1"
+            variants={DOT_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderDotIcon.displayName = "FolderDotIcon";
+
+export { FolderDotIcon };

package/icons/icons/folder-down.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import type { Transition, 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 FolderDownIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderDownIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ARROW_VARIANTS: Variants = {
+  normal: { y: 0 },
+  animate: { y: [0, 2, 0] },
+};
+
+const ARROW_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const FolderDownIcon = forwardRef<FolderDownIconHandle, FolderDownIconProps>(
+  ({ 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="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+          <motion.g
+            animate={controls}
+            initial="normal"
+            transition={ARROW_TRANSITION}
+            variants={ARROW_VARIANTS}
+          >
+            <path d="M12 10v6" />
+            <path d="m15 13-3 3-3-3" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderDownIcon.displayName = "FolderDownIcon";
+
+export { FolderDownIcon };

package/icons/icons/folder-git-2.tsx

@@ -0,0 +1,146 @@
+"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 FolderGit2IconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderGit2IconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DURATION = 0.3;
+
+const CALCULATE_DELAY = (i: number) => {
+  if (i === 0) return 0.1;
+
+  return i * DURATION + 0.1;
+};
+
+const FolderGit2Icon = forwardRef<FolderGit2IconHandle, FolderGit2IconProps>(
+  ({ 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="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5" />
+          <motion.circle
+            animate={controls}
+            cx="13"
+            cy="12"
+            r="2"
+            transition={{
+              duration: DURATION,
+              delay: CALCULATE_DELAY(0),
+              opacity: { delay: CALCULATE_DELAY(0) },
+            }}
+            variants={{
+              normal: { pathLength: 1, opacity: 1, transition: { delay: 0 } },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M18 19c-2.8 0-5-2.2-5-5v8"
+            transition={{
+              duration: DURATION,
+              delay: CALCULATE_DELAY(1),
+              opacity: { delay: CALCULATE_DELAY(1) },
+            }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                pathOffset: 0,
+                opacity: 1,
+                transition: { delay: 0 },
+              },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+                pathOffset: [1, 0],
+              },
+            }}
+          />
+          <motion.circle
+            animate={controls}
+            cx="20"
+            cy="19"
+            r="2"
+            transition={{
+              duration: DURATION,
+              delay: CALCULATE_DELAY(2),
+              opacity: { delay: CALCULATE_DELAY(2) },
+            }}
+            variants={{
+              normal: { pathLength: 1, opacity: 1, transition: { delay: 0 } },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+              },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderGit2Icon.displayName = "FolderGit2Icon";
+
+export { FolderGit2Icon };

package/icons/icons/folder-git.tsx

@@ -0,0 +1,116 @@
+"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 FolderGitIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderGitIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const COMMIT_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: (custom: number) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      delay: 0.15 * custom,
+      opacity: { delay: 0.1 * custom },
+    },
+  }),
+};
+
+const FolderGitIcon = forwardRef<FolderGitIconHandle, FolderGitIconProps>(
+  ({ 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="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+          <motion.circle
+            animate={controls}
+            custom={1}
+            cx="12"
+            cy="13"
+            r="2"
+            variants={COMMIT_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={2}
+            d="M14 13h3"
+            variants={COMMIT_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={0}
+            d="M7 13h3"
+            variants={COMMIT_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderGitIcon.displayName = "FolderGitIcon";
+
+export { FolderGitIcon };

package/icons/icons/folder-heart.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes, MouseEvent } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface FolderHeartIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderHeartIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HEART_VARIANTS: Variants = {
+  normal: { scale: 1, opacity: 0.9 },
+  animate: {
+    scale: [1, 1.12, 1.04, 1.12, 1],
+    opacity: [0.9, 1, 0.85, 1, 0.9],
+    transition: {
+      duration: 0.8,
+      ease: "easeInOut",
+      repeat: Number.POSITIVE_INFINITY,
+    },
+  },
+};
+
+const FolderHeartIcon = forwardRef<FolderHeartIconHandle, FolderHeartIconProps>(
+  ({ 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(
+      (event: MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(event);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (event: MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(event);
+        } 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="M10.638 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v3.417" />
+          <motion.path
+            animate={controls}
+            d="M14.62 18.8A2.25 2.25 0 1 1 18 15.836a2.25 2.25 0 1 1 3.38 2.966l-2.626 2.856a.998.998 0 0 1-1.507 0z"
+            initial="normal"
+            style={{ transformOrigin: "18px 18px" }}
+            variants={HEART_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderHeartIcon.displayName = "FolderHeartIcon";
+
+export { FolderHeartIcon };

package/icons/icons/folder-input.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import type { Transition, Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes, MouseEvent } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface FolderInputIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderInputIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ARROW_VARIANTS: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, 2, 0] },
+};
+
+const ARROW_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const FolderInputIcon = forwardRef<FolderInputIconHandle, FolderInputIconProps>(
+  ({ 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(
+      (event: MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(event);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (event: MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(event);
+        } 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 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1" />
+          <motion.g
+            animate={controls}
+            initial="normal"
+            transition={ARROW_TRANSITION}
+            variants={ARROW_VARIANTS}
+          >
+            <path d="M2 13h10" />
+            <path d="m9 16 3-3-3-3" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderInputIcon.displayName = "FolderInputIcon";
+
+export { FolderInputIcon };