@romansmirnov/doku 1.0.0

package/icons/icons/connect.tsx

@@ -0,0 +1,164 @@
+"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 ConnectIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ConnectIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PLUG_VARIANTS: Variants = {
+  normal: {
+    x: 0,
+    y: 0,
+  },
+  animate: {
+    x: -3,
+    y: 3,
+  },
+};
+
+const SOCKET_VARIANTS: Variants = {
+  normal: {
+    x: 0,
+    y: 0,
+  },
+  animate: {
+    x: 3,
+    y: -3,
+  },
+};
+
+const PATH_VARIANTS = {
+  normal: (custom: { x: number; y: number }) => ({
+    d: `M${custom.x} ${custom.y} l2.5 -2.5`,
+  }),
+  animate: (custom: { x: number; y: number }) => ({
+    d: `M${custom.x + 2.93} ${custom.y - 2.93} l0.10 -0.10`,
+  }),
+};
+
+const ConnectIcon = forwardRef<ConnectIconHandle, ConnectIconProps>(
+  ({ 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="M19 5l3 -3"
+            transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            variants={{
+              normal: {
+                d: "M19 5l3 -3",
+              },
+              animate: {
+                d: "M17 7l5 -5",
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="m2 22 3-3"
+            transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            variants={{
+              normal: {
+                d: "m2 22 3-3",
+              },
+              animate: {
+                d: "m2 22 6-6",
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
+            transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            variants={SOCKET_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={{ x: 7.5, y: 13.5 }}
+            initial="normal"
+            transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={{ x: 10.5, y: 16.5 }}
+            initial="normal"
+            transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z"
+            transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            variants={PLUG_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ConnectIcon.displayName = "ConnectIcon";
+
+export { ConnectIcon };

package/icons/icons/construction.tsx

@@ -0,0 +1,111 @@
+"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 ConstructionIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ConstructionIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ConstructionIcon = forwardRef<
+  ConstructionIconHandle,
+  ConstructionIconProps
+>(({ 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"
+      >
+        <defs>
+          <motion.pattern
+            animate={controls}
+            height="14"
+            id="stripes"
+            initial="normal"
+            patternUnits="userSpaceOnUse"
+            variants={{
+              normal: {
+                x: 0,
+              },
+              animate: {
+                x: [0, 6],
+                transition: {
+                  duration: 1,
+                  ease: "linear",
+                  repeat: Number.POSITIVE_INFINITY,
+                  repeatType: "loop",
+                },
+              },
+            }}
+            width="6"
+          >
+            <path d="M-4 -2 L14 30" stroke="currentColor" strokeWidth="2" />
+          </motion.pattern>
+        </defs>
+        <rect fill="url(#stripes)" height="8" rx="1" width="20" x="2" y="6" />
+        <path d="M17 14v7" />
+        <path d="M7 14v7" />
+        <path d="M17 3v3" />
+        <path d="M7 3v3" />
+      </svg>
+    </div>
+  );
+});
+
+ConstructionIcon.displayName = "ConstructionIcon";
+
+export { ConstructionIcon };

package/icons/icons/contrast.tsx

@@ -0,0 +1,100 @@
+"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 ContrastIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ContrastIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANT: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: 180,
+    transformOrigin: "left center",
+    transition: {
+      type: "spring",
+      stiffness: 80,
+      damping: 12,
+    },
+  },
+};
+
+const ContrastIcon = forwardRef<ContrastIconHandle, ContrastIconProps>(
+  ({ 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"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <motion.path
+            animate={controls}
+            d="M12 18a6 6 0 0 0 0-12v12z"
+            initial="normal"
+            variants={PATH_VARIANT}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ContrastIcon.displayName = "ContrastIcon";
+
+export { ContrastIcon };

package/icons/icons/cooking-pot.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 CookingPotIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CookingPotIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const LID_VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: {
+    rotate: [0, -14, 14, -10, 10, -6, 6, 0],
+    transition: {
+      duration: 0.9,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const POT_VARIANTS: Variants = {
+  normal: { scale: 1 },
+  animate: {
+    scale: [1, 1.08, 1],
+    transition: {
+      duration: 0.95,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const CookingPotIcon = forwardRef<CookingPotIconHandle, CookingPotIconProps>(
+  ({ 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.g
+            animate={controls}
+            initial="normal"
+            style={{ transformOrigin: "12px 16px" }}
+            variants={POT_VARIANTS}
+          >
+            <path d="M2 12h20" />
+            <path d="M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8" />
+          </motion.g>
+          <motion.g
+            animate={controls}
+            initial="normal"
+            style={{ transformOrigin: "18px 6px" }}
+            variants={LID_VARIANTS}
+          >
+            <path d="m4 8 16-4" />
+            <path d="m8.86 6.78-.45-1.81a2 2 0 0 1 1.45-2.43l1.94-.48a2 2 0 0 1 2.43 1.46l.45 1.8" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+CookingPotIcon.displayName = "CookingPotIcon";
+
+export { CookingPotIcon };

package/icons/icons/copy.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import type { Transition } 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 CopyIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CopyIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 160,
+  damping: 17,
+  mass: 1,
+};
+
+const CopyIcon = forwardRef<CopyIconHandle, CopyIconProps>(
+  ({ 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.rect
+            animate={controls}
+            height="14"
+            rx="2"
+            ry="2"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { translateY: 0, translateX: 0 },
+              animate: { translateY: -3, translateX: -3 },
+            }}
+            width="14"
+            x="8"
+            y="8"
+          />
+          <motion.path
+            animate={controls}
+            d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { x: 0, y: 0 },
+              animate: { x: 3, y: 3 },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+CopyIcon.displayName = "CopyIcon";
+
+export { CopyIcon };

package/icons/icons/corner-down-left.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";
+
+const STRETCH_VARIANTS: Variants = {
+  normal: { scaleX: 1, x: 0, opacity: 1 },
+  animate: {
+    scaleX: [1, 1.15, 1],
+    x: [0, -2, 0],
+    transition: {
+      duration: 0.45,
+      ease: "easeInOut",
+    },
+  },
+};
+
+export interface CornerDownLeftIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CornerDownLeftIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CornerDownLeftIcon = forwardRef<
+  CornerDownLeftIconHandle,
+  CornerDownLeftIconProps
+>(({ 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}
+        initial="normal"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        variants={STRETCH_VARIANTS}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M4 15h12a4 4 0 0 0 4-4V4" />
+        <path d="m9 20-5-5 5-5" />
+      </motion.svg>
+    </div>
+  );
+});
+
+CornerDownLeftIcon.displayName = "CornerDownLeftIcon";
+
+export { CornerDownLeftIcon };