@romansmirnov/doku 1.0.0

package/icons/icons/airplane.tsx

@@ -0,0 +1,134 @@
+"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 AirplaneIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface AirplaneIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SPEED_LINES = [
+  { x1: 5, y1: 15, x2: 1, y2: 19, delay: 0.1 },
+  { x1: 7, y1: 17, x2: 3, y2: 21, delay: 0.2 },
+  { x1: 9, y1: 19, x2: 5, y2: 23, delay: 0.3 },
+];
+
+const AirplaneIcon = forwardRef<AirplaneIconHandle, AirplaneIconProps>(
+  ({ 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
+          className="overflow-visible"
+          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="M17.8 19.2L16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"
+            transition={{
+              duration: 0.5,
+            }}
+            variants={{
+              normal: { x: 0, y: 0, scale: 1 },
+              animate: {
+                x: 3,
+                y: -3,
+                scale: 0.8,
+              },
+            }}
+          />
+          {SPEED_LINES.map((line, index) => (
+            <motion.line
+              animate={controls}
+              initial={{ opacity: 0, pathLength: 1, pathSpacing: 1 }}
+              key={index}
+              stroke="currentColor"
+              strokeWidth="1"
+              transition={{ duration: 0.15, delay: line.delay }}
+              variants={{
+                normal: {
+                  pathOffset: [0, 1],
+                  translateX: -3,
+                  translateY: 3,
+                  opacity: 0,
+                  transition: {
+                    duration: 0.3,
+                    times: [0, 0.6, 1],
+                  },
+                },
+                animate: {
+                  pathOffset: [1, 2],
+                  translateX: [0, 0],
+                  translateY: [0, 0],
+                  opacity: 1,
+                },
+              }}
+              x1={line.x1}
+              x2={line.x2}
+              y1={line.y1}
+              y2={line.y2}
+            />
+          ))}
+        </svg>
+      </div>
+    );
+  }
+);
+
+AirplaneIcon.displayName = "AirplaneIcon";
+
+export { AirplaneIcon };

package/icons/icons/airplay.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { easeInOut, easeOut, motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface AirplayIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface AirplayIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DURATION = 0.3;
+
+const SCREEN_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: { duration: DURATION },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: DURATION * 2,
+      ease: easeInOut,
+    },
+  },
+};
+
+const TRIANGLE_VARIANTS = {
+  normal: {
+    scale: 1,
+    opacity: 1,
+    transition: { duration: DURATION },
+  },
+  animate: {
+    scale: [0.6, 1.1, 1],
+    opacity: [0, 1],
+    transition: {
+      duration: DURATION * 2,
+      ease: easeOut,
+    },
+  },
+};
+
+const AirplayIcon = forwardRef<AirplayIconHandle, AirplayIconProps>(
+  ({ 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("animate");
+          controls.start("normal");
+        },
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      async (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          await controls.start("animate");
+          controls.start("normal");
+        }
+      },
+      [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="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"
+            variants={SCREEN_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M12 15l5 6H7z"
+            variants={TRIANGLE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+AirplayIcon.displayName = "AirplayIcon";
+
+export { AirplayIcon };

package/icons/icons/alarm-clock.tsx

@@ -0,0 +1,178 @@
+"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 AlarmClockIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface AlarmClockIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+    x: 0,
+    transition: {
+      duration: 0.2,
+      type: "spring",
+      stiffness: 200,
+      damping: 25,
+    },
+  },
+  animate: {
+    y: -1.5,
+    x: [-1, 1, -1, 1, -1, 0],
+    transition: {
+      y: {
+        duration: 0.2,
+        type: "spring",
+        stiffness: 200,
+        damping: 25,
+      },
+      x: {
+        duration: 0.3,
+        repeat: Number.POSITIVE_INFINITY,
+        ease: "linear",
+      },
+    },
+  },
+};
+
+const SECONDARY_PATH_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+    x: 0,
+    transition: {
+      duration: 0.2,
+      type: "spring",
+      stiffness: 200,
+      damping: 25,
+    },
+  },
+  animate: {
+    y: -2.5,
+    x: [-2, 2, -2, 2, -2, 0],
+    transition: {
+      y: {
+        duration: 0.2,
+        type: "spring",
+        stiffness: 200,
+        damping: 25,
+      },
+      x: {
+        duration: 0.3,
+        repeat: Number.POSITIVE_INFINITY,
+        ease: "linear",
+      },
+    },
+  },
+};
+
+const AlarmClockIcon = forwardRef<AlarmClockIconHandle, AlarmClockIconProps>(
+  ({ 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"
+          style={{ overflow: "visible" }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            animate={controls}
+            d="M18 20.5L19.5 22"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M6 20.5L4.5 22"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M21 13C21 17.968 16.968 22 12 22C7.032 22 3 17.968 3 13C3 8.032 7.032 4 12 4C16.968 4 21 8.032 21 13Z"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M15.339 15.862L12.549 14.197C12.063 13.909 11.667 13.216 11.667 12.649V8.95898"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M18 2L21.747 5.31064"
+            initial="normal"
+            variants={SECONDARY_PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M6 2L2.25304 5.31064"
+            initial="normal"
+            variants={SECONDARY_PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+AlarmClockIcon.displayName = "AlarmClockIcon";
+
+export { AlarmClockIcon };

package/icons/icons/align-center.tsx

@@ -0,0 +1,98 @@
+"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 AlignCenterIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface AlignCenterIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const AlignCenterIcon = forwardRef<AlignCenterIconHandle, AlignCenterIconProps>(
+  ({ 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="M17 12H7"
+            variants={{
+              normal: { translateX: 0 },
+              animate: {
+                translateX: [0, 3, -3, 2, -2, 0],
+                transition: {
+                  ease: "linear",
+                  translateX: {
+                    duration: 1,
+                  },
+                },
+              },
+            }}
+          />
+          <path d="M19 18H5" />
+          <path d="M21 6H3" />
+        </svg>
+      </div>
+    );
+  }
+);
+
+AlignCenterIcon.displayName = "AlignCenterIcon";
+
+export { AlignCenterIcon };

package/icons/icons/align-horizontal.tsx

@@ -0,0 +1,126 @@
+"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 AlignHorizontalIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface AlignHorizontalIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 160,
+  damping: 17,
+  mass: 1,
+};
+
+const AlignHorizontalIcon = forwardRef<
+  AlignHorizontalIconHandle,
+  AlignHorizontalIconProps
+>(({ 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="10"
+          rx="2"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { scaleX: 1 },
+            animate: { scaleX: 0.85 },
+          }}
+          width="6"
+          x="9"
+          y="7"
+        />
+        <motion.path
+          animate={controls}
+          d="M4 22V2"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateX: 0, scaleY: 1 },
+            animate: {
+              translateX: 2,
+              scaleY: 0.9,
+            },
+          }}
+        />
+        <motion.path
+          animate={controls}
+          d="M20 22V2"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateX: 0, scaleY: 1 },
+            animate: {
+              translateX: -2,
+              scaleY: 0.9,
+            },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+AlignHorizontalIcon.displayName = "AlignHorizontalIcon";
+
+export { AlignHorizontalIcon };