@romansmirnov/doku 1.0.0

package/icons/icons/circle-dashed.tsx

@@ -0,0 +1,108 @@
+"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 CircleDashedIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CircleDashedIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: (i: number) => ({
+    opacity: [0, 1],
+    transition: { delay: i * 0.1, duration: 0.3 },
+  }),
+};
+
+const CircleDashedIcon = forwardRef<
+  CircleDashedIconHandle,
+  CircleDashedIconProps
+>(({ 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"
+      >
+        {[
+          "M10.1 2.182a10 10 0 0 1 3.8 0",
+          "M13.9 21.818a10 10 0 0 1-3.8 0",
+          "M17.609 3.721a10 10 0 0 1 2.69 2.7",
+          "M2.182 13.9a10 10 0 0 1 0-3.8",
+          "M20.279 17.609a10 10 0 0 1-2.7 2.69",
+          "M21.818 10.1a10 10 0 0 1 0 3.8",
+          "M3.721 6.391a10 10 0 0 1 2.7-2.69",
+          "M6.391 20.279a10 10 0 0 1-2.69-2.7",
+        ].map((d, index) => (
+          <motion.path
+            animate={controls}
+            custom={index + 1}
+            d={d}
+            key={d}
+            variants={PATH_VARIANTS}
+          />
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+CircleDashedIcon.displayName = "CircleDashedIcon";
+
+export { CircleDashedIcon };

package/icons/icons/circle-dollar-sign.tsx

@@ -0,0 +1,137 @@
+"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 CircleDollarSignIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CircleDollarSignIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DOLLAR_MAIN_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const DOLLAR_SECONDARY_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      delay: 0.3,
+      duration: 0.3,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      delay: 0.5,
+      duration: 0.4,
+      opacity: { duration: 0.1, delay: 0.5 },
+    },
+  },
+};
+
+const CircleDollarSignIcon = forwardRef<
+  CircleDollarSignIconHandle,
+  CircleDollarSignIconProps
+>(({ 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="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"
+          initial="normal"
+          variants={DOLLAR_MAIN_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M12 18V6"
+          initial="normal"
+          variants={DOLLAR_SECONDARY_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+CircleDollarSignIcon.displayName = "CircleDollarSignIcon";
+
+export { CircleDollarSignIcon };

package/icons/icons/circle-help.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";
+
+export interface CircleHelpIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CircleHelpIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: { rotate: [0, -10, 10, -10, 0] },
+};
+
+const CircleHelpIcon = forwardRef<CircleHelpIconHandle, CircleHelpIconProps>(
+  ({ 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.g
+            animate={controls}
+            transition={{
+              duration: 0.5,
+              ease: "easeInOut",
+            }}
+            variants={VARIANTS}
+          >
+            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+            <path d="M12 17h.01" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+CircleHelpIcon.displayName = "CircleHelpIcon";
+
+export { CircleHelpIcon };

package/icons/icons/clap.tsx

@@ -0,0 +1,121 @@
+"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 ClapIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ClapIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    originX: "4px",
+    originY: "20px",
+  },
+  animate: {
+    rotate: [-10, -10, 0],
+    transition: {
+      duration: 0.8,
+      times: [0, 0.5, 1],
+      ease: "easeInOut",
+    },
+  },
+};
+
+const CLAP_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    originX: "3px",
+    originY: "11px",
+  },
+  animate: {
+    rotate: [0, -10, 16, 0],
+    transition: {
+      duration: 0.4,
+      times: [0, 0.3, 0.6, 1],
+      ease: "easeInOut",
+    },
+  },
+};
+
+const ClapIcon = forwardRef<ClapIconHandle, ClapIconProps>(
+  ({ 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.g animate={controls} variants={VARIANTS}>
+            <motion.g animate={controls} variants={CLAP_VARIANTS}>
+              <path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" />
+              <path d="m6.2 5.3 3.1 3.9" />
+              <path d="m12.4 3.4 3.1 4" />
+            </motion.g>
+            <path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+ClapIcon.displayName = "ClapIcon";
+
+export { ClapIcon };

package/icons/icons/clipboard-check.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";
+
+export interface ClipboardCheckIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ClipboardCheckIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CHECK_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 0,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.3, ease: "easeInOut" },
+      opacity: { duration: 0.3, ease: "easeInOut" },
+    },
+  },
+};
+
+const ClipboardCheckIcon = forwardRef<
+  ClipboardCheckIconHandle,
+  ClipboardCheckIconProps
+>(({ 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"
+      >
+        <rect height="4" rx="1" ry="1" width="8" x="8" y="2" />
+        <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+        <motion.path
+          animate={controls}
+          d="m9 14 2 2 4-4"
+          initial="normal"
+          style={{ transformOrigin: "center" }}
+          variants={CHECK_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ClipboardCheckIcon.displayName = "ClipboardCheckIcon";
+
+export { ClipboardCheckIcon };

package/icons/icons/clock.tsx

@@ -0,0 +1,138 @@
+"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 ClockIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ClockIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const HAND_TRANSITION: Transition = {
+  duration: 0.6,
+  ease: [0.4, 0, 0.2, 1],
+};
+
+const HAND_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    originX: "0%",
+    originY: "100%",
+  },
+  animate: {
+    rotate: 360,
+    originX: "0%",
+    originY: "100%",
+  },
+};
+
+const MINUTE_HAND_TRANSITION: Transition = {
+  duration: 0.5,
+  ease: "easeInOut",
+};
+
+const MINUTE_HAND_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    originX: "0%",
+    originY: "100%",
+  },
+  animate: {
+    rotate: 45,
+    originX: "0%",
+    originY: "100%",
+  },
+};
+
+const ClockIcon = forwardRef<ClockIconHandle, ClockIconProps>(
+  ({ 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.line
+            animate={controls}
+            initial="normal"
+            transition={HAND_TRANSITION}
+            variants={HAND_VARIANTS}
+            x1="12"
+            x2="12"
+            y1="12"
+            y2="6"
+          />
+          <motion.line
+            animate={controls}
+            initial="normal"
+            transition={MINUTE_HAND_TRANSITION}
+            variants={MINUTE_HAND_VARIANTS}
+            x1="12"
+            x2="16"
+            y1="12"
+            y2="12"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ClockIcon.displayName = "ClockIcon";
+
+export { ClockIcon };