@romansmirnov/doku 1.0.0

package/icons/icons/webhook.tsx

@@ -0,0 +1,116 @@
+"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 WebhookIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WebhookIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const TRANSITION: Transition = {
+  duration: 0.3,
+  opacity: { delay: 0.15 },
+};
+
+const VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      ...TRANSITION,
+      delay: 0.1,
+    },
+  },
+};
+
+const WebhookIcon = forwardRef<WebhookIconHandle, WebhookIconProps>(
+  ({ 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="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"
+            variants={VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+WebhookIcon.displayName = "WebhookIcon";
+
+export { WebhookIcon };

package/icons/icons/wifi-low.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface WifiLowIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WifiLowIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const WIFI_LEVELS = [
+  { d: "M12 20h.01", initialOpacity: 1, delay: 0 },
+  { d: "M8.5 16.429a5 5 0 0 1 7 0", initialOpacity: 1, delay: 0.1 },
+];
+
+const WifiLowIcon = forwardRef<WifiLowIconHandle, WifiLowIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const questionControls = useAnimation();
+
+    const isControlledRef = useRef(false);
+    const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const scheduleHide = useCallback(() => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+      hideTimerRef.current = setTimeout(() => {
+        questionControls.start("hide");
+      }, 1500);
+    }, [questionControls]);
+
+    const cancelHide = useCallback(() => {
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = null;
+      }
+    }, []);
+
+    useEffect(() => () => cancelHide(), [cancelHide]);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: async () => {
+          await controls.start("fadeOut");
+          controls.start("fadeIn");
+          questionControls.start("show");
+          scheduleHide();
+        },
+        stopAnimation: () => {
+          cancelHide();
+          controls.start("fadeIn");
+          questionControls.start("hide");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      async (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          cancelHide();
+          await controls.start("fadeOut");
+          controls.start("fadeIn");
+          questionControls.start("show");
+          scheduleHide();
+        }
+      },
+      [controls, questionControls, onMouseEnter, scheduleHide, cancelHide]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        cancelHide();
+        controls.start("fadeIn");
+        questionControls.start("hide");
+        onMouseLeave?.(e);
+      },
+      [controls, questionControls, onMouseLeave, cancelHide]
+    );
+
+    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"
+        >
+          {WIFI_LEVELS.map((level, index) => (
+            <motion.path
+              animate={controls}
+              d={level.d}
+              initial={{ opacity: level.initialOpacity }}
+              key={level.d}
+              variants={{
+                fadeOut: {
+                  opacity: index === 0 ? 1 : 0,
+                  transition: { duration: 0.2 },
+                },
+                fadeIn: {
+                  opacity: 1,
+                  transition: {
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 20,
+                    delay: level.delay,
+                  },
+                },
+              }}
+            />
+          ))}
+          <motion.text
+            animate={questionControls}
+            dominantBaseline="central"
+            fill="currentColor"
+            fontSize="8"
+            fontWeight="bold"
+            initial={{ opacity: 0, scale: 0 }}
+            stroke="none"
+            style={{ transformOrigin: "12px 8px" }}
+            textAnchor="middle"
+            variants={{
+              hide: {
+                opacity: 0,
+                scale: 0,
+                transition: { duration: 0.15 },
+              },
+              show: {
+                opacity: 1,
+                scale: 1,
+                transition: {
+                  type: "spring",
+                  stiffness: 400,
+                  damping: 18,
+                  delay: 0.1,
+                },
+              },
+            }}
+            x="12"
+            y="8"
+          >
+            ?
+          </motion.text>
+        </svg>
+      </div>
+    );
+  }
+);
+
+WifiLowIcon.displayName = "WifiLowIcon";
+
+export { WifiLowIcon };

package/icons/icons/wifi.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 WifiIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WifiIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const WIFI_LEVELS = [
+  { d: "M12 20h.01", initialOpacity: 1, delay: 0 },
+  { d: "M8.5 16.429a5 5 0 0 1 7 0", initialOpacity: 1, delay: 0.1 },
+  { d: "M5 12.859a10 10 0 0 1 14 0", initialOpacity: 1, delay: 0.2 },
+  { d: "M2 8.82a15 15 0 0 1 20 0", initialOpacity: 1, delay: 0.3 },
+];
+
+const WifiIcon = forwardRef<WifiIconHandle, WifiIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: async () => {
+          await controls.start("fadeOut");
+          controls.start("fadeIn");
+        },
+        stopAnimation: () => controls.start("fadeIn"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      async (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          await controls.start("fadeOut");
+          controls.start("fadeIn");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        controls.start("fadeIn");
+        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"
+        >
+          {WIFI_LEVELS.map((level, index) => (
+            <motion.path
+              animate={controls}
+              d={level.d}
+              initial={{ opacity: level.initialOpacity }}
+              key={index}
+              variants={{
+                fadeOut: {
+                  opacity: index === 0 ? 1 : 0,
+                  transition: { duration: 0.2 },
+                },
+                fadeIn: {
+                  opacity: 1,
+                  transition: {
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 20,
+                    delay: level.delay,
+                  },
+                },
+              }}
+            />
+          ))}
+        </svg>
+      </div>
+    );
+  }
+);
+
+WifiIcon.displayName = "WifiIcon";
+
+export { WifiIcon };

package/icons/icons/wind-arrow-down.tsx

@@ -0,0 +1,150 @@
+"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 WindArrowDownIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WindArrowDownIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const WIND_VARIANTS: Variants = {
+  normal: (custom: number) => ({
+    pathLength: 1,
+    opacity: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.3,
+      ease: "easeInOut",
+      delay: custom,
+    },
+  }),
+  animate: (custom: number) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut",
+      delay: custom,
+    },
+  }),
+};
+
+const ARROW_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+      ease: "easeInOut",
+    },
+  },
+  animate: {
+    y: [-10, 0],
+    opacity: [0, 1],
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut",
+      delay: 0.35,
+    },
+  },
+};
+
+const WindArrowDownIcon = forwardRef<
+  WindArrowDownIconHandle,
+  WindArrowDownIconProps
+>(({ 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}
+          custom={0.2}
+          d="M12.8 21.6A2 2 0 1 0 14 18H2"
+          initial="normal"
+          variants={WIND_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={0.4}
+          d="M17.5 10a2.5 2.5 0 1 1 2 4H2"
+          initial="normal"
+          variants={WIND_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M10 2v8"
+          initial="normal"
+          variants={ARROW_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="m6 6 4 4 4-4"
+          initial="normal"
+          variants={ARROW_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+WindArrowDownIcon.displayName = "WindArrowDownIcon";
+
+export { WindArrowDownIcon };

package/icons/icons/wind.tsx

@@ -0,0 +1,124 @@
+"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 WindIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface WindIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: (custom: number) => ({
+    pathLength: 1,
+    opacity: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.3,
+      ease: "easeInOut",
+      delay: custom,
+    },
+  }),
+  animate: (custom: number) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut",
+      delay: custom,
+    },
+  }),
+};
+
+const WindIcon = forwardRef<WindIconHandle, WindIconProps>(
+  ({ 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}
+            custom={0.2}
+            d="M12.8 19.6A2 2 0 1 0 14 16H2"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={0}
+            d="M17.5 8a2.5 2.5 0 1 1 2 4H2"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={0.4}
+            d="M9.8 4.4A2 2 0 1 1 11 8H2"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+WindIcon.displayName = "WindIcon";
+
+export { WindIcon };