@romansmirnov/doku 1.0.0

package/icons/icons/smartphone-nfc.tsx

@@ -0,0 +1,129 @@
+"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 SmartphoneNfcIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SmartphoneNfcIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    transition: {
+      duration: 0.4,
+    },
+  },
+  fadeOut: {
+    opacity: 0,
+    transition: { duration: 0.3 },
+  },
+  fadeIn: (i: number) => ({
+    opacity: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 20,
+      delay: i * 0.1,
+    },
+  }),
+};
+
+const SmartphoneNfcIcon = forwardRef<
+  SmartphoneNfcIconHandle,
+  SmartphoneNfcIconProps
+>(({ 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("normal"),
+    };
+  });
+
+  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>) => {
+      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"
+      >
+        <rect height="12" rx="1" width="7" x="2" y="6" />
+        <motion.path
+          animate={controls}
+          custom={0}
+          d="M13 8.32a7.43 7.43 0 0 1 0 7.36"
+          initial={{ opacity: 1 }}
+          variants={PATH_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={1}
+          d="M16.46 6.21a11.76 11.76 0 0 1 0 11.58"
+          initial={{ opacity: 1 }}
+          variants={PATH_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={2}
+          d="M19.91 4.1a15.91 15.91 0 0 1 .01 15.8"
+          initial={{ opacity: 1 }}
+          variants={PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SmartphoneNfcIcon.displayName = "SmartphoneNfcIcon";
+
+export { SmartphoneNfcIcon };

package/icons/icons/smile-plus.tsx

@@ -0,0 +1,99 @@
+"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 SmilePlusIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SmilePlusIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SmilePlusIcon = forwardRef<SmilePlusIconHandle, SmilePlusIconProps>(
+  ({ 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]
+    );
+
+    const faceVariants: Variants = {
+      normal: { scale: 1 },
+      animate: {
+        scale: 1.1,
+        transition: { type: "spring", stiffness: 200, damping: 20 },
+      },
+    };
+
+    const plusVariants: Variants = {
+      normal: { rotate: 0, scale: 1 },
+      animate: {
+        rotate: 90,
+        scale: 1.2,
+        transition: { type: "spring", stiffness: 200, damping: 20, delay: 0.1 },
+      },
+    };
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={faceVariants}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M22 11v1a10 10 0 1 1-9-10" />
+          <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+          <line x1="9" x2="9.01" y1="9" y2="9" />
+          <line x1="15" x2="15.01" y1="9" y2="9" />
+          <motion.path animate={controls} d="M16 5h6" variants={plusVariants} />
+          <motion.path animate={controls} d="M19 2v6" variants={plusVariants} />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+SmilePlusIcon.displayName = "SmilePlusIcon";
+
+export { SmilePlusIcon };

package/icons/icons/smile.tsx

@@ -0,0 +1,163 @@
+"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 SmileIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SmileIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SmileIcon = forwardRef<SmileIconHandle, SmileIconProps>(
+  ({ 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]
+    );
+
+    const faceVariants: Variants = {
+      normal: {
+        scale: 1,
+        rotate: 0,
+        strokeWidth: 2,
+        transition: { duration: 0.3, ease: "easeOut" },
+      },
+      animate: {
+        scale: [1, 1.15, 1.05, 1.1],
+        rotate: [0, -3, 3, 0],
+        strokeWidth: [2, 2.5, 2.5, 2.5],
+        transition: {
+          duration: 0.8,
+          times: [0, 0.3, 0.6, 1],
+          ease: "easeInOut",
+        },
+      },
+    };
+
+    const mouthVariants: Variants = {
+      normal: {
+        d: "M8 14s1.5 2 4 2 4-2 4-2",
+        pathLength: 1,
+        pathOffset: 0,
+        strokeWidth: 2,
+        transition: { duration: 0.3, ease: "easeOut" },
+      },
+      animate: {
+        d: "M7 13.5s2.5 3.5 5 3.5 5-3.5 5-3.5",
+        pathLength: [0.3, 1, 1],
+        pathOffset: [0, 0, 0],
+        strokeWidth: 2.5,
+        transition: {
+          d: { duration: 0.4, ease: "easeOut" },
+          pathLength: {
+            duration: 0.5,
+            times: [0, 0.5, 1],
+            ease: "easeInOut",
+          },
+          delay: 0.1,
+        },
+      },
+    };
+
+    const eyeVariants: Variants = {
+      normal: {
+        scale: 1,
+        opacity: 1,
+        transition: { duration: 0.3, ease: "easeOut" },
+      },
+      animate: {
+        scale: [1, 1.5, 0.8, 1.2],
+        opacity: [1, 1, 1, 1],
+        transition: {
+          duration: 0.5,
+          times: [0, 0.3, 0.6, 1],
+          ease: "easeInOut",
+        },
+      },
+    };
+
+    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={faceVariants}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.circle cx="12" cy="12" r="10" />
+          <motion.path
+            animate={controls}
+            d="M8 14s1.5 2 4 2 4-2 4-2"
+            initial="normal"
+            variants={mouthVariants}
+          />
+          <motion.line
+            animate={controls}
+            initial="normal"
+            variants={eyeVariants}
+            x1="9"
+            x2="9.01"
+            y1="9"
+            y2="9"
+          />
+          <motion.line
+            animate={controls}
+            initial="normal"
+            variants={eyeVariants}
+            x1="15"
+            x2="15.01"
+            y1="9"
+            y2="9"
+          />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+SmileIcon.displayName = "SmileIcon";
+
+export { SmileIcon };

package/icons/icons/snowflake.tsx

@@ -0,0 +1,109 @@
+"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 PATH_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+  },
+  animate: {
+    rotate: [0, -5, 5, -5, 5, 0],
+    transition: {
+      duration: 0.4,
+      times: [0, 0.2, 0.4, 0.6, 0.8, 1],
+    },
+  },
+};
+
+export interface SnowflakeIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SnowflakeIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SnowflakeIcon = forwardRef<SnowflakeIconHandle, SnowflakeIconProps>(
+  ({ 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}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          style={{ transformOrigin: "center" }}
+          variants={PATH_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="m10 20-1.25-2.5L6 18" />
+          <path d="M10 4 8.75 6.5 6 6" />
+          <path d="m14 20 1.25-2.5L18 18" />
+          <path d="m14 4 1.25 2.5L18 6" />
+          <path d="m17 21-3-6h-4" />
+          <path d="m17 3-3 6 1.5 3" />
+          <path d="M2 12h6.5L10 9" />
+          <path d="m20 10-1.5 2 1.5 2" />
+          <path d="M22 12h-6.5L14 15" />
+          <path d="m4 10 1.5 2L4 14" />
+          <path d="m7 21 3-6-1.5-3" />
+          <path d="m7 3 3 6h4" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+SnowflakeIcon.displayName = "SnowflakeIcon";
+
+export { SnowflakeIcon };

package/icons/icons/sparkles.tsx

@@ -0,0 +1,148 @@
+"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 SparklesIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SparklesIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SPARKLE_VARIANTS: Variants = {
+  initial: {
+    y: 0,
+    fill: "none",
+  },
+  hover: {
+    y: [0, -1, 0, 0],
+    fill: "currentColor",
+    transition: {
+      duration: 1,
+      bounce: 0.3,
+    },
+  },
+};
+
+const STAR_VARIANTS: Variants = {
+  initial: {
+    opacity: 1,
+    x: 0,
+    y: 0,
+  },
+  blink: () => ({
+    opacity: [0, 1, 0, 0, 0, 0, 1],
+    transition: {
+      duration: 2,
+      type: "spring",
+      stiffness: 70,
+      damping: 10,
+      mass: 0.4,
+    },
+  }),
+};
+
+const SparklesIcon = forwardRef<SparklesIconHandle, SparklesIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const starControls = useAnimation();
+    const sparkleControls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => {
+          sparkleControls.start("hover");
+          starControls.start("blink", { delay: 1 });
+        },
+        stopAnimation: () => {
+          sparkleControls.start("initial");
+          starControls.start("initial");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          sparkleControls.start("hover");
+          starControls.start("blink", { delay: 1 });
+        }
+      },
+      [onMouseEnter, sparkleControls, starControls]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          sparkleControls.start("initial");
+          starControls.start("initial");
+        }
+      },
+      [sparkleControls, starControls, 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={sparkleControls}
+            d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"
+            variants={SPARKLE_VARIANTS}
+          />
+          <motion.path
+            animate={starControls}
+            d="M20 3v4"
+            variants={STAR_VARIANTS}
+          />
+          <motion.path
+            animate={starControls}
+            d="M22 5h-4"
+            variants={STAR_VARIANTS}
+          />
+          <motion.path
+            animate={starControls}
+            d="M4 17v2"
+            variants={STAR_VARIANTS}
+          />
+          <motion.path
+            animate={starControls}
+            d="M5 18H3"
+            variants={STAR_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+SparklesIcon.displayName = "SparklesIcon";
+
+export { SparklesIcon };