@romansmirnov/doku 1.0.0

package/icons/icons/mic.tsx

@@ -0,0 +1,104 @@
+"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 MicIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MicIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CAPSULE_VARIANTS: Variants = {
+  normal: { y: 0 },
+  animate: {
+    y: [0, -3, 0, -2, 0],
+    transition: {
+      duration: 0.6,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const MicIcon = forwardRef<MicIconHandle, MicIconProps>(
+  ({ 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}
+          overflow="visible"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 19v3" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+          <motion.rect
+            animate={controls}
+            height="13"
+            rx="3"
+            variants={CAPSULE_VARIANTS}
+            width="6"
+            x="9"
+            y="2"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+MicIcon.displayName = "MicIcon";
+
+export { MicIcon };

package/icons/icons/minimize.tsx

@@ -0,0 +1,123 @@
+"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 MinimizeIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MinimizeIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 250,
+  damping: 25,
+};
+
+const MinimizeIcon = forwardRef<MinimizeIconHandle, MinimizeIconProps>(
+  ({ 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="M8 3v3a2 2 0 0 1-2 2H3"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { translateX: "0%", translateY: "0%" },
+              animate: { translateX: "2px", translateY: "2px" },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M21 8h-3a2 2 0 0 1-2-2V3"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { translateX: "0%", translateY: "0%" },
+              animate: { translateX: "-2px", translateY: "2px" },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M3 16h3a2 2 0 0 1 2 2v3"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { translateX: "0%", translateY: "0%" },
+              animate: { translateX: "2px", translateY: "-2px" },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M16 21v-3a2 2 0 0 1 2-2h3"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { translateX: "0%", translateY: "0%" },
+              animate: { translateX: "-2px", translateY: "-2px" },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+MinimizeIcon.displayName = "MinimizeIcon";
+
+export { MinimizeIcon };

package/icons/icons/monitor-check.tsx

@@ -0,0 +1,110 @@
+"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 MonitorCheckIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MonitorCheckIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CHECK_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut" },
+      opacity: { duration: 0.4, ease: "easeInOut" },
+    },
+  },
+};
+
+const MonitorCheckIcon = forwardRef<
+  MonitorCheckIconHandle,
+  MonitorCheckIconProps
+>(({ 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="14" rx="2" width="20" x="2" y="3" />
+        <path d="M12 17v4" />
+        <path d="M8 21h8" />
+        <motion.path
+          animate={controls}
+          d="m9 10 2 2 4-4"
+          initial="normal"
+          style={{ transformOrigin: "center" }}
+          variants={CHECK_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+MonitorCheckIcon.displayName = "MonitorCheckIcon";
+
+export { MonitorCheckIcon };

package/icons/icons/moon.tsx

@@ -0,0 +1,98 @@
+"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 MoonIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MoonIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SVG_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+  },
+  animate: {
+    rotate: [0, -10, 10, -5, 5, 0],
+  },
+};
+
+const SVG_TRANSITION: Transition = {
+  duration: 1.2,
+  ease: "easeInOut",
+};
+
+const MoonIcon = forwardRef<MoonIconHandle, MoonIconProps>(
+  ({ 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"
+          transition={SVG_TRANSITION}
+          variants={SVG_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+MoonIcon.displayName = "MoonIcon";
+
+export { MoonIcon };

package/icons/icons/nfc.tsx

@@ -0,0 +1,134 @@
+"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 NfcIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface NfcIconProps 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 NfcIcon = forwardRef<NfcIconHandle, NfcIconProps>(
+  ({ 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"
+        >
+          <motion.path
+            animate={controls}
+            custom={0}
+            d="M6 8.32a7.43 7.43 0 0 1 0 7.36"
+            initial={{ opacity: 1 }}
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={1}
+            d="M9.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="M12.91 4.1a15.91 15.91 0 0 1 .01 15.8"
+            initial={{ opacity: 1 }}
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={3}
+            d="M16.37 2a20.16 20.16 0 0 1 0 20"
+            initial={{ opacity: 1 }}
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+NfcIcon.displayName = "NfcIcon";
+
+export { NfcIcon };

package/icons/icons/panel-left-close.tsx

@@ -0,0 +1,99 @@
+"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 PanelLeftCloseIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PanelLeftCloseIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, -1.5, 0] },
+};
+
+const PanelLeftCloseIcon = forwardRef<
+  PanelLeftCloseIconHandle,
+  PanelLeftCloseIconProps
+>(({ 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="18" rx="2" width="18" x="3" y="3" />
+        <path d="M9 3v18" />
+        <motion.path
+          animate={controls}
+          d="m16 15-3-3 3-3"
+          transition={DEFAULT_TRANSITION}
+          variants={PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+PanelLeftCloseIcon.displayName = "PanelLeftCloseIcon";
+
+export { PanelLeftCloseIcon };