@romansmirnov/doku 1.0.0

package/icons/icons/cpu.tsx

@@ -0,0 +1,159 @@
+"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 CpuIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CpuIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const TRANSITION: Transition = {
+  duration: 0.5,
+  ease: "easeInOut",
+  repeat: 1,
+};
+
+const Y_VARIANTS: Variants = {
+  normal: {
+    scale: 1,
+    rotate: 0,
+    opacity: 1,
+  },
+  animate: {
+    scaleY: [1, 1.5, 1],
+    opacity: [1, 0.8, 1],
+  },
+};
+const X_VARIANTS: Variants = {
+  normal: {
+    scale: 1,
+    rotate: 0,
+    opacity: 1,
+  },
+  animate: {
+    scaleX: [1, 1.5, 1],
+    opacity: [1, 0.8, 1],
+  },
+};
+
+const CpuIcon = forwardRef<CpuIconHandle, CpuIconProps>(
+  ({ 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="16" rx="2" width="16" x="4" y="4" />
+          <rect height="6" rx="1" width="6" x="9" y="9" />
+          <motion.path
+            animate={controls}
+            d="M15 2v2"
+            transition={TRANSITION}
+            variants={Y_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M15 20v2"
+            transition={TRANSITION}
+            variants={Y_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M2 15h2"
+            transition={TRANSITION}
+            variants={X_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M2 9h2"
+            transition={TRANSITION}
+            variants={X_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M20 15h2"
+            transition={TRANSITION}
+            variants={X_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M20 9h2"
+            transition={TRANSITION}
+            variants={X_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M9 2v2"
+            transition={TRANSITION}
+            variants={Y_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M9 20v2"
+            transition={TRANSITION}
+            variants={Y_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+CpuIcon.displayName = "CpuIcon";
+
+export { CpuIcon };

package/icons/icons/cup-soda.tsx

@@ -0,0 +1,180 @@
+"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 CupSodaIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CupSodaIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const STRAW_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+    scaleY: 1,
+    transition: {
+      duration: 0.25,
+      ease: "easeOut",
+    },
+  },
+  animate: {
+    y: [0, -0.85, 0.15, 0],
+    scaleY: [1, 1.06, 0.99, 1],
+    transition: {
+      duration: 0.5,
+      ease: [0.34, 1.56, 0.64, 1],
+      times: [0, 0.35, 0.65, 1],
+    },
+  },
+};
+
+const WAVE_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+    transition: {
+      duration: 0.25,
+      ease: "easeOut",
+    },
+  },
+  animate: {
+    y: [0, -1, 0],
+    transition: {
+      duration: 1.8,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const BUBBLE_VARIANTS: Variants = {
+  normal: { opacity: 0, y: 0, scale: 1 },
+  animate: (delay: number) => ({
+    opacity: [0, 0.9, 0.4, 0],
+    y: [0, -3, -10, -14],
+    scale: [1, 1, 0.85, 0.6],
+    transition: {
+      duration: 1.5,
+      ease: "easeIn",
+      delay,
+      repeat: Number.POSITIVE_INFINITY,
+      repeatDelay: 0,
+      times: [0, 0.08, 0.7, 1],
+    },
+  }),
+};
+
+const BUBBLES = [
+  { delay: 0, cx: 8.25, cy: 20.5, r: 0.75 },
+  { delay: 0.35, cx: 11.25, cy: 19.5, r: 0.6 },
+  { delay: 0.7, cx: 14, cy: 20.75, r: 0.6 },
+  { delay: 1.05, cx: 9.75, cy: 19, r: 0.75 },
+  { delay: 0.55, cx: 12.5, cy: 20, r: 0.45 },
+] as const;
+
+const CupSodaIcon = forwardRef<CupSodaIconHandle, CupSodaIconProps>(
+  ({ 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("relative", 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="m6 8 1.75 12.28a2 2 0 0 0 2 1.72h4.54a2 2 0 0 0 2-1.72L18 8" />
+          <path d="M5 8h14" />
+          <motion.path
+            animate={controls}
+            d="M7 15a6.47 6.47 0 0 1 5 0 6.47 6.47 0 0 0 5 0"
+            variants={WAVE_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m12 8 1-6h2"
+            style={{
+              transformBox: "fill-box",
+              originX: "50%",
+              originY: "100%",
+            }}
+            variants={STRAW_VARIANTS}
+          />
+          {BUBBLES.map((b, i) => (
+            <motion.circle
+              animate={controls}
+              custom={b.delay}
+              cx={b.cx}
+              cy={b.cy}
+              fill="currentColor"
+              initial="normal"
+              key={i}
+              r={b.r}
+              stroke="none"
+              style={{
+                transformBox: "fill-box",
+                originX: "50%",
+                originY: "50%",
+              }}
+              variants={BUBBLE_VARIANTS}
+            />
+          ))}
+        </svg>
+      </div>
+    );
+  }
+);
+
+CupSodaIcon.displayName = "CupSodaIcon";
+
+export { CupSodaIcon };

package/icons/icons/cursor-click.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 CursorClickIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CursorClickIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CURSOR_VARIANTS: Variants = {
+  initial: { x: 0, y: 0 },
+  hover: {
+    x: [0, 0, -3, 0],
+    y: [0, -4, 0, 0],
+    transition: {
+      duration: 1,
+      bounce: 0.3,
+    },
+  },
+};
+
+const LINE_VARIANTS: Variants = {
+  initial: { opacity: 1, x: 0, y: 0 },
+  spread: (custom: { x: number; y: number }) => ({
+    opacity: [0, 1, 0, 0, 0, 0, 1],
+    x: [0, custom.x, 0, 0],
+    y: [0, custom.y, 0, 0],
+    transition: {
+      type: "spring",
+      stiffness: 70,
+      damping: 10,
+      mass: 0.4,
+    },
+  }),
+};
+
+const CursorClickIcon = forwardRef<CursorClickIconHandle, CursorClickIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const clickControls = useAnimation();
+    const cursorControls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => {
+          cursorControls.start("hover");
+          clickControls.start("spread", { delay: 1.3 });
+        },
+        stopAnimation: () => {
+          cursorControls.start("initial");
+          clickControls.start("initial");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          cursorControls.start("hover");
+          clickControls.start("spread", { delay: 1.3 });
+        }
+      },
+      [clickControls, cursorControls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          cursorControls.start("initial");
+          clickControls.start("initial");
+        }
+      },
+      [cursorControls, clickControls, 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={cursorControls}
+            d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"
+            variants={CURSOR_VARIANTS}
+          />
+          <motion.path
+            animate={clickControls}
+            custom={{ x: 1, y: -1 }}
+            d="M14 4.1 12 6"
+            variants={LINE_VARIANTS}
+          />
+          <motion.path
+            animate={clickControls}
+            custom={{ x: -1, y: 0 }}
+            d="m5.1 8-2.9-.8"
+            variants={LINE_VARIANTS}
+          />
+          <motion.path
+            animate={clickControls}
+            custom={{ x: -1, y: 1 }}
+            d="m6 12-1.9 2"
+            variants={LINE_VARIANTS}
+          />
+          <motion.path
+            animate={clickControls}
+            custom={{ x: 0, y: -1 }}
+            d="M7.2 2.2 8 5.1"
+            variants={LINE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+CursorClickIcon.displayName = "CursorClickIcon";
+
+export { CursorClickIcon };

package/icons/icons/database-backup.tsx

@@ -0,0 +1,96 @@
+"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 DatabaseBackupIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface DatabaseBackupIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DatabaseBackupIcon = forwardRef<
+  DatabaseBackupIconHandle,
+  DatabaseBackupIconProps
+>(({ 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"
+      >
+        <ellipse cx="12" cy="5" rx="9" ry="3" />
+        <path d="M3 12a9 3 0 0 0 5 2.69" />
+        <path d="M21 9.3V5" />
+        <path d="M3 5v14a9 3 0 0 0 6.47 2.88" />
+
+        <motion.g
+          animate={controls}
+          style={{ transformOrigin: "17.5px 17px" }}
+          transition={{ duration: 0.6, ease: "easeInOut" }}
+          variants={{
+            normal: { rotate: 0 },
+            animate: { rotate: 360 },
+          }}
+        >
+          <path d="M12 12v4h4" />
+          <path d="M13 20a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L12 16" />
+        </motion.g>
+      </svg>
+    </div>
+  );
+});
+
+DatabaseBackupIcon.displayName = "DatabaseBackupIcon";
+
+export { DatabaseBackupIcon };

package/icons/icons/delete.tsx

@@ -0,0 +1,133 @@
+"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 DeleteIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface DeleteIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const LID_VARIANTS: Variants = {
+  normal: { y: 0 },
+  animate: { y: -1.1 },
+};
+
+const SPRING_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 500,
+  damping: 30,
+};
+
+const DeleteIcon = forwardRef<DeleteIconHandle, DeleteIconProps>(
+  ({ 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}
+            transition={SPRING_TRANSITION}
+            variants={LID_VARIANTS}
+          >
+            <path d="M3 6h18" />
+            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+          </motion.g>
+          <motion.path
+            animate={controls}
+            d="M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8"
+            transition={SPRING_TRANSITION}
+            variants={{
+              normal: { d: "M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8" },
+              animate: { d: "M19 9v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V9" },
+            }}
+          />
+          <motion.line
+            animate={controls}
+            transition={SPRING_TRANSITION}
+            variants={{
+              normal: { y1: 11, y2: 17 },
+              animate: { y1: 11.5, y2: 17.5 },
+            }}
+            x1="10"
+            x2="10"
+            y1="11"
+            y2="17"
+          />
+          <motion.line
+            animate={controls}
+            transition={SPRING_TRANSITION}
+            variants={{
+              normal: { y1: 11, y2: 17 },
+              animate: { y1: 11.5, y2: 17.5 },
+            }}
+            x1="14"
+            x2="14"
+            y1="11"
+            y2="17"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+DeleteIcon.displayName = "DeleteIcon";
+
+export { DeleteIcon };