@romansmirnov/doku 1.0.0

package/icons/icons/flask.tsx

@@ -0,0 +1,120 @@
+"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 FlaskIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FlaskIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const FlaskIcon = forwardRef<FlaskIconHandle, FlaskIconProps>(
+  ({ 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="currentColor"
+          height={size}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="5.632"
+          viewBox="0 0 512 512"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.g
+            animate={controls}
+            variants={{
+              normal: { rotate: 0, translateY: 0 },
+              animate: {
+                translateY: -12,
+                rotate: [0, 5, -5, 3, -3, 0],
+                transition: {
+                  ease: "linear",
+                  rotate: { duration: 0.8 },
+                },
+              },
+            }}
+          >
+            <circle cx="151.273" cy="407.273" r="11.636" />
+            <circle cx="244.364" cy="372.364" r="11.636" />
+            <circle cx="290.909" cy="418.909" r="11.636" />
+            <circle cx="221.091" cy="453.818" r="11.636" />
+            <circle cx="372.364" cy="430.545" r="11.636" />
+          </motion.g>
+          <motion.path
+            animate={controls}
+            d="M456.145,436.364l-79.127-124.509c0-2.327-2.327-4.655-3.491-5.818l-34.909-55.855c-8.146-13.964-12.8-29.091-12.8-44.218 V67.491c13.964-4.655,23.273-17.455,23.273-32.582C349.091,15.127,333.964,0,314.182,0H197.818 c-19.782,0-34.909,15.127-34.909,34.909c0,19.782,15.127,34.909,34.909,34.909h69.818c6.982,0,11.636-4.655,11.636-11.636 s-4.655-11.636-11.636-11.636h-69.818c-6.982,0-11.636-4.655-11.636-11.636c0-6.982,4.655-11.636,11.636-11.636h116.364 c6.982,0,11.636,4.655,11.636,11.636c0,6.982-4.655,11.636-11.636,11.636s-11.636,4.655-11.636,11.636v147.782 c0,19.782,5.818,39.564,16.291,55.855l19.782,31.418c-30.255-5.818-64-2.327-88.436,10.473 c-23.273,11.636-60.509,13.964-87.273,4.655l30.255-46.545c10.473-16.291,16.291-36.073,16.291-55.855V104.727 c0-6.982-4.655-11.636-11.636-11.636s-11.636,4.655-11.636,11.636v101.236c0,15.127-4.655,30.255-12.8,43.055l-34.909,55.855 c-1.164,1.164-2.327,2.327-3.491,3.491c0,1.164,0,1.164-1.164,2.327L55.855,436.364c-5.818,9.309-9.309,19.782-9.309,31.418v9.309 c0,19.782,15.127,34.909,34.909,34.909h349.091c19.782,0,34.909-15.127,34.909-34.909v-9.309 C465.455,456.145,461.964,445.673,456.145,436.364z M443.345,477.091h-1.164c0,6.982-4.655,11.636-11.636,11.636H81.455 c-6.982,0-11.636-4.655-11.636-11.636v-9.309c0-6.982,2.327-12.8,5.818-18.618l75.636-119.855 c15.127,5.818,32.582,8.145,50.036,8.145c22.109,0,43.055-4.655,60.509-12.8c25.6-12.8,68.655-13.964,96.582-1.164l79.127,125.673 c3.491,5.818,5.818,11.636,5.818,18.618V477.091z"
+            variants={{
+              normal: { rotate: 0, scale: 1 },
+              animate: {
+                scale: 0.9,
+                rotate: [0, 6, -6, 3, -3, 0],
+                transition: {
+                  duration: 0.8,
+                  scale: {
+                    duration: 0.3,
+                    type: "spring",
+                    bounce: 0.4,
+                    stiffness: 150,
+                    damping: 10,
+                  },
+                },
+              },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FlaskIcon.displayName = "FlaskIcon";
+
+export { FlaskIcon };

package/icons/icons/folder-archive.tsx

@@ -0,0 +1,95 @@
+"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 FolderArchiveIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderArchiveIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BLINK_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: {
+    opacity: [1, 0, 1],
+    transition: { duration: 0.6, ease: "easeInOut" },
+  },
+};
+
+const FolderArchiveIcon = forwardRef<
+  FolderArchiveIconHandle,
+  FolderArchiveIconProps
+>(({ 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.9 19.8A2 2 0 0 0 22 18V8a2 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 2h5.1" />
+        <motion.g animate={controls} initial="normal" variants={BLINK_VARIANTS}>
+          <circle cx="15" cy="19" r="2" />
+          <path d="M15 11v-1" />
+          <path d="M15 17v-2" />
+        </motion.g>
+      </svg>
+    </div>
+  );
+});
+
+FolderArchiveIcon.displayName = "FolderArchiveIcon";
+
+export { FolderArchiveIcon };

package/icons/icons/folder-check.tsx

@@ -0,0 +1,106 @@
+"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 FolderCheckIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderCheckIconProps 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 FolderCheckIcon = forwardRef<FolderCheckIconHandle, FolderCheckIconProps>(
+  ({ 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.path
+            animate={controls}
+            d="m9 13 2 2 4-4"
+            initial="normal"
+            style={{ transformOrigin: "center" }}
+            variants={CHECK_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderCheckIcon.displayName = "FolderCheckIcon";
+
+export { FolderCheckIcon };

package/icons/icons/folder-clock.tsx

@@ -0,0 +1,139 @@
+"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 FolderClockIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderClockIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HAND_TRANSITION: Transition = {
+  duration: 0.6,
+  ease: [0.4, 0, 0.2, 1],
+};
+
+const HAND_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    originX: "0%",
+    originY: "100%",
+  },
+  animate: {
+    rotate: 360,
+    originX: "0%",
+    originY: "100%",
+  },
+};
+
+const MINUTE_HAND_TRANSITION: Transition = {
+  duration: 0.5,
+  ease: "easeInOut",
+};
+
+const MINUTE_HAND_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    originX: "0%",
+    originY: "100%",
+  },
+  animate: {
+    rotate: 45,
+    originX: "0%",
+    originY: "100%",
+  },
+};
+
+const FolderClockIcon = forwardRef<FolderClockIconHandle, FolderClockIconProps>(
+  ({ 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 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 2" />
+
+          <circle cx="16" cy="16" r="6" />
+          <motion.line
+            animate={controls}
+            initial="normal"
+            transition={HAND_TRANSITION}
+            variants={HAND_VARIANTS}
+            x1="16"
+            x2="16"
+            y1="16"
+            y2="13"
+          />
+          <motion.line
+            animate={controls}
+            initial="normal"
+            transition={MINUTE_HAND_TRANSITION}
+            variants={MINUTE_HAND_VARIANTS}
+            x1="16"
+            x2="18.5"
+            y1="16"
+            y2="16"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderClockIcon.displayName = "FolderClockIcon";
+
+export { FolderClockIcon };

package/icons/icons/folder-code.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 FolderCodeIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderCodeIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CODE_VARIANTS: Variants = {
+  normal: { x: 0, rotate: 0, opacity: 1 },
+  animate: (direction: number) => ({
+    x: [0, direction * 2, 0],
+    rotate: [0, direction * -8, 0],
+    opacity: 1,
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut",
+    },
+  }),
+};
+
+const FolderCodeIcon = forwardRef<FolderCodeIconHandle, FolderCodeIconProps>(
+  ({ 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.path
+            animate={controls}
+            custom={-1}
+            d="M10 10.5 8 13l2 2.5"
+            initial="normal"
+            variants={CODE_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={1}
+            d="m14 10.5 2 2.5-2 2.5"
+            initial="normal"
+            variants={CODE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderCodeIcon.displayName = "FolderCodeIcon";
+
+export { FolderCodeIcon };

package/icons/icons/folder-cog.tsx

@@ -0,0 +1,101 @@
+"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 FolderCogIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FolderCogIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const G_VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: { rotate: 180 },
+};
+
+const FolderCogIcon = forwardRef<FolderCogIconHandle, FolderCogIconProps>(
+  ({ 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="M10.3 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.98a2 2 0 0 1 1.69.9l.66 1.2A2 2 0 0 0 12 6h8a2 2 0 0 1 2 2v3.3" />
+          <motion.g
+            animate={controls}
+            transition={{ type: "spring", stiffness: 50, damping: 10 }}
+            variants={G_VARIANTS}
+          >
+            <path d="m14.305 19.53.923-.382" />
+            <path d="m15.228 16.852-.923-.383" />
+            <path d="m16.852 15.228-.383-.923" />
+            <path d="m16.852 20.772-.383.924" />
+            <path d="m19.148 15.228.383-.923" />
+            <path d="m19.53 21.696-.382-.924" />
+            <path d="m20.772 16.852.924-.383" />
+            <path d="m20.772 19.148.924.383" />
+            <circle cx="18" cy="18" r="3" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+FolderCogIcon.displayName = "FolderCogIcon";
+
+export { FolderCogIcon };