@romansmirnov/doku 1.0.0

package/icons/icons/blocks.tsx

@@ -0,0 +1,92 @@
+"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 BlocksIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BlocksIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: { translateX: 0, translateY: 0 },
+  animate: { translateX: -4, translateY: 4 },
+};
+
+const BlocksIcon = forwardRef<BlocksIconHandle, BlocksIconProps>(
+  ({ 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"
+        >
+          <path d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3" />
+          <motion.path
+            animate={controls}
+            d="M14 3h7v7h-7z"
+            variants={VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BlocksIcon.displayName = "BlocksIcon";
+
+export { BlocksIcon };

package/icons/icons/bluetooth-connected.tsx

@@ -0,0 +1,136 @@
+"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 BluetoothConnectedIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BluetoothConnectedIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1, 0.5, 1],
+    transition: {
+      duration: 0.3,
+      delay: 0.2,
+    },
+  },
+};
+
+const BluetoothConnectedIcon = forwardRef<
+  BluetoothConnectedIconHandle,
+  BluetoothConnectedIconProps
+>(({ 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="m7 7 10 10-5 5V2l5 5L7 17"
+          variants={PATH_VARIANTS}
+        />
+        <motion.line
+          animate={controls}
+          variants={{
+            normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+              pathOffset: [1, 0],
+              transition: {
+                duration: 0.4,
+              },
+            },
+          }}
+          x1="18"
+          x2="21"
+          y1="12"
+          y2="12"
+        />
+        <motion.line
+          animate={controls}
+          variants={{
+            normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+            animate: {
+              pathLength: [0, 1],
+              opacity: [0, 1],
+              pathOffset: [-1, 0],
+              transition: {
+                duration: 0.2,
+              },
+            },
+          }}
+          x1="3"
+          x2="6"
+          y1="12"
+          y2="12"
+        />
+      </svg>
+    </div>
+  );
+});
+
+BluetoothConnectedIcon.displayName = "BluetoothConnectedIcon";
+
+export { BluetoothConnectedIcon };

package/icons/icons/bluetooth-off.tsx

@@ -0,0 +1,124 @@
+"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 BluetoothOffIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BluetoothOffIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    pathOffset: [1, 0],
+  },
+};
+
+const OFFLINE_VARIANTS: Variants = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+  },
+};
+
+const BluetoothOffIcon = forwardRef<
+  BluetoothOffIconHandle,
+  BluetoothOffIconProps
+>(({ 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 17-5 5V12l-5 5"
+          transition={{
+            duration: 0.3,
+          }}
+          variants={PATH_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="m2 2 20 20"
+          transition={{
+            duration: 0.2,
+            delay: 0.3,
+          }}
+          variants={OFFLINE_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M14.5 9.5 17 7l-5-5v4.5"
+          transition={{
+            duration: 0.3,
+          }}
+          variants={PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+BluetoothOffIcon.displayName = "BluetoothOffIcon";
+
+export { BluetoothOffIcon };

package/icons/icons/bluetooth-searching.tsx

@@ -0,0 +1,128 @@
+"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 BluetoothSearchingIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BluetoothSearchingIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    scale: 1,
+    transition: {
+      repeat: 0,
+    },
+  },
+  animate: {
+    scale: [0, 1, 0.8],
+  },
+};
+
+const SECOND_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [1, 0.8, 1],
+    transition: { repeat: Number.POSITIVE_INFINITY },
+  },
+};
+
+const BluetoothSearchingIcon = forwardRef<
+  BluetoothSearchingIconHandle,
+  BluetoothSearchingIconProps
+>(({ 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="m7 7 10 10-5 5V2l5 5L7 17"
+          variants={SECOND_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M20.83 14.83a4 4 0 0 0 0-5.66"
+          transition={{
+            duration: 0.6,
+            delay: 0.2,
+            repeat: Number.POSITIVE_INFINITY,
+          }}
+          variants={PATH_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M18 12h.01"
+          transition={{
+            duration: 0.6,
+            repeat: Number.POSITIVE_INFINITY,
+          }}
+          variants={PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+BluetoothSearchingIcon.displayName = "BluetoothSearchingIcon";
+
+export { BluetoothSearchingIcon };

package/icons/icons/bluetooth.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 BluetoothIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BluetoothIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    pathOffset: [1, 0],
+  },
+};
+
+const BluetoothIcon = forwardRef<BluetoothIconHandle, BluetoothIconProps>(
+  ({ 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"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            animate={controls}
+            d="m7 7 10 10-5 5V2l5 5L7 17"
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M14.5 9.5 17 7l-5-5v4.5"
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BluetoothIcon.displayName = "BluetoothIcon";
+
+export { BluetoothIcon };

package/icons/icons/bold.tsx

@@ -0,0 +1,95 @@
+"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 BoldIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BoldIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    strokeWidth: 2,
+  },
+  animate: {
+    strokeWidth: 3.5,
+  },
+};
+
+const BoldIcon = forwardRef<BoldIconHandle, BoldIconProps>(
+  ({ 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="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"
+            transition={{ duration: 0.6 }}
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BoldIcon.displayName = "BoldIcon";
+
+export { BoldIcon };