@romansmirnov/doku 1.0.0

package/icons/icons/volume.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import type { HTMLAttributes } from "react";
+import {
+  Fragment,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface VolumeIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface VolumeIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VolumeIcon = forwardRef<VolumeIconHandle, VolumeIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => setIsHovered(true),
+        stopAnimation: () => setIsHovered(false),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          setIsHovered(true);
+        }
+      },
+      [onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          setIsHovered(false);
+        }
+      },
+      [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="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
+          <AnimatePresence initial={false} mode="wait">
+            {isHovered ? (
+              <Fragment key="volume-icon-active">
+                <motion.path
+                  animate={{ opacity: 1, transition: { delay: 0.1 } }}
+                  d="M16 9a5 5 0 0 1 0 6"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                />
+                <motion.path
+                  animate={{ opacity: 1, transition: { delay: 0.2 } }}
+                  d="M19.364 18.364a9 9 0 0 0 0-12.728"
+                  exit={{ opacity: 0 }}
+                  initial={{ opacity: 0 }}
+                />
+              </Fragment>
+            ) : (
+              <Fragment key="volume-icon-inactive">
+                <motion.line
+                  animate={{
+                    pathLength: [0, 1],
+                    opacity: [0, 1],
+                    transition: { delay: 0.1 },
+                  }}
+                  exit={{ pathLength: 1, opacity: 1 }}
+                  initial={{ pathLength: 1, opacity: 1 }}
+                  x1="22"
+                  x2="16"
+                  y1="9"
+                  y2="15"
+                />
+                <motion.line
+                  animate={{
+                    pathLength: [0, 1],
+                    opacity: [0, 1],
+                    transition: { delay: 0.2 },
+                  }}
+                  exit={{ pathLength: 1, opacity: 1 }}
+                  initial={{ pathLength: 1, opacity: 1 }}
+                  x1="16"
+                  x2="22"
+                  y1="9"
+                  y2="15"
+                />
+              </Fragment>
+            )}
+          </AnimatePresence>
+        </svg>
+      </div>
+    );
+  }
+);
+
+VolumeIcon.displayName = "VolumeIcon";
+
+export { VolumeIcon };

package/icons/icons/washing-machine.tsx

@@ -0,0 +1,132 @@
+"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 WashingMachineIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WashingMachineIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const WashingMachineIcon = forwardRef<
+  WashingMachineIconHandle,
+  WashingMachineIconProps
+>(({ 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}
+          variants={{
+            normal: {
+              x: 0,
+            },
+            animate: {
+              x: [0, 0.5, -0.5, 0.3, -0.3, 0],
+              transition: {
+                duration: 0.8,
+                repeat: Number.POSITIVE_INFINITY,
+                ease: "easeInOut",
+              },
+            },
+          }}
+        >
+          <path d="M3 6h3" />
+          <path d="M17 6h.01" />
+          <rect height="20" rx="2" width="18" x="3" y="2" />
+        </motion.g>
+        <motion.g
+          animate={controls}
+          variants={{
+            normal: {
+              rotate: 0,
+              y: 0,
+              transition: {
+                duration: 0.5,
+                ease: "linear",
+              },
+            },
+            animate: {
+              rotate: 360,
+              y: [0, -0.3, 0, 0.3, 0],
+              transition: {
+                rotate: {
+                  duration: 1,
+                  repeat: Number.POSITIVE_INFINITY,
+                  ease: "linear",
+                },
+                y: {
+                  duration: 0.3,
+                  repeat: Number.POSITIVE_INFINITY,
+                  ease: "easeInOut",
+                },
+              },
+            },
+          }}
+        >
+          <circle cx="12" cy="13" r="5" />
+          <path d="M12 18a2.5 2.5 0 0 0 0-5 2.5 2.5 0 0 1 0-5" />
+        </motion.g>
+      </svg>
+    </div>
+  );
+});
+
+WashingMachineIcon.displayName = "WashingMachineIcon";
+
+export { WashingMachineIcon };

package/icons/icons/waves-ladder.tsx

@@ -0,0 +1,90 @@
+"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 WavesLadderIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WavesLadderIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const WavesLadderIcon = forwardRef<WavesLadderIconHandle, WavesLadderIconProps>(
+  ({ 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) controls.start("animate");
+        onMouseEnter?.(e);
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) controls.start("normal");
+        onMouseLeave?.(e);
+      },
+      [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 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+          <motion.g
+            animate={controls}
+            initial={{ y: 0, opacity: 1 }}
+            variants={{
+              normal: { y: 0, opacity: 1 },
+              animate: {
+                y: [13, 0],
+                opacity: [0, 0, 1],
+                transition: { duration: 1, times: [0, 0.5, 1], repeat: 0 },
+              },
+            }}
+          >
+            <path d="M19 5a2 2 0 0 0-2 2v11" />
+            <path d="M7 13h10" />
+            <path d="M7 9h10" />
+            <path d="M9 5a2 2 0 0 0-2 2v11" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+WavesLadderIcon.displayName = "WavesLadderIcon";
+export { WavesLadderIcon };

package/icons/icons/waves.tsx

@@ -0,0 +1,112 @@
+"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 WavesIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WavesIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const WavesIcon = forwardRef<WavesIconHandle, WavesIconProps>(
+  ({ 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) {
+          controls.start("animate");
+        }
+        onMouseEnter?.(e);
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) {
+          controls.start("normal");
+        }
+        onMouseLeave?.(e);
+      },
+      [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="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1"
+            initial={{ pathLength: 1 }}
+            variants={{
+              normal: { pathLength: 1 },
+              animate: {
+                pathLength: [0, 1],
+                transition: { duration: 0.4, ease: "linear" },
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M2 12c.6.5 1.2 1 2.5 1c2.5 0 2.5-2 5-2c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1"
+            initial={{ pathLength: 1 }}
+            variants={{
+              normal: { pathLength: 1 },
+              animate: {
+                pathLength: [0, 1],
+                transition: { duration: 0.4, ease: "linear" },
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M2 18c.6.5 1.2 1 2.5 1c2.5 0 2.5-2 5-2c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1"
+            initial={{ pathLength: 1 }}
+            variants={{
+              normal: { pathLength: 1 },
+              animate: {
+                pathLength: [0, 1],
+                transition: { duration: 0.4, ease: "linear" },
+              },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+WavesIcon.displayName = "WavesIcon";
+export { WavesIcon };

package/icons/icons/waypoints.tsx

@@ -0,0 +1,146 @@
+"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 WaypointsIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WaypointsIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const 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 WaypointsIcon = forwardRef<WaypointsIconHandle, WaypointsIconProps>(
+  ({ 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.circle
+            animate={controls}
+            custom={0}
+            cx="12"
+            cy="4.5"
+            r="2.5"
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={1}
+            d="m10.2 6.3-3.9 3.9"
+            variants={VARIANTS}
+          />
+          <motion.circle
+            animate={controls}
+            custom={0}
+            cx="4.5"
+            cy="12"
+            r="2.5"
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={2}
+            d="M7 12h10"
+            variants={VARIANTS}
+          />
+          <motion.circle
+            animate={controls}
+            custom={0}
+            cx="19.5"
+            cy="12"
+            r="2.5"
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={3}
+            d="m13.8 17.7 3.9-3.9"
+            variants={VARIANTS}
+          />
+          <motion.circle
+            animate={controls}
+            custom={0}
+            cx="12"
+            cy="19.5"
+            r="2.5"
+            variants={VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+WaypointsIcon.displayName = "WaypointsIcon";
+
+export { WaypointsIcon };