@romansmirnov/doku 1.0.0

package/icons/icons/cart.tsx

@@ -0,0 +1,97 @@
+"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 CartIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CartIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CART_VARIANTS: Variants = {
+  normal: { scale: 1 },
+  animate: {
+    scale: 1.1,
+    y: [0, -5, 0],
+    transition: {
+      duration: 0.3,
+      ease: "easeInOut",
+      y: { repeat: 1, delay: 0.1, duration: 0.4 },
+    },
+  },
+};
+
+const CartIcon = forwardRef<CartIconHandle, CartIconProps>(
+  ({ 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={{ duration: 0.2 }}
+          variants={CART_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M6.29977 5H21L19 12H7.37671M20 16H8L6 3H3M9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19C8.55228 19 9 19.4477 9 20ZM20 20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20C18 19.4477 18.4477 19 19 19C19.5523 19 20 19.4477 20 20Z" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+CartIcon.displayName = "CartIcon";
+
+export { CartIcon };

package/icons/icons/cast.tsx

@@ -0,0 +1,113 @@
+"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 CastIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CastIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: (custom: number) => ({
+    opacity: [0, 1],
+    transition: {
+      delay: custom,
+      duration: 0.5,
+    },
+  }),
+};
+
+const CastIcon = forwardRef<CastIconHandle, CastIconProps>(
+  ({ 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="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" />
+          <motion.path
+            animate={controls}
+            custom={0.2}
+            d="M2 12a9 9 0 0 1 8 8"
+            variants={VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            custom={0.1}
+            d="M2 16a5 5 0 0 1 4 4"
+            variants={VARIANTS}
+          />
+          <motion.line
+            animate={controls}
+            custom={0}
+            variants={VARIANTS}
+            x1="2"
+            x2="2.01"
+            y1="20"
+            y2="20"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+CastIcon.displayName = "CastIcon";
+
+export { CastIcon };

package/icons/icons/cctv.tsx

@@ -0,0 +1,125 @@
+"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 CctvIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CctvIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CCTV_GROUP_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    y: 0,
+    x: 0,
+  },
+  animate: {
+    rotate: [0, -20, -20, 15, 15, 0],
+    y: [0, -0.5, -0.5, 0, 0, 0],
+    x: [0, 0, 0, 0.5, 0.5, 0],
+    transition: {
+      duration: 1.8,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const CCTV_PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [1, 0, 1, 0, 1, 0, 1],
+    transition: {
+      duration: 1.8,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const CctvIcon = forwardRef<CctvIconHandle, CctvIconProps>(
+  ({ 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}
+            initial="initial"
+            variants={CCTV_GROUP_VARIANTS}
+          >
+            <path d="M16.75 12h3.632a1 1 0 0 1 .894 1.447l-2.034 4.069a1 1 0 0 1-1.708.134l-2.124-2.97" />
+            <path d="M17.106 9.053a1 1 0 0 1 .447 1.341l-3.106 6.211a1 1 0 0 1-1.342.447L3.61 12.3a2.92 2.92 0 0 1-1.3-3.91L3.69 5.6a2.92 2.92 0 0 1 3.92-1.3z" />
+            <motion.path
+              animate={controls}
+              d="M7 9h.01"
+              variants={CCTV_PATH_VARIANTS}
+            />
+          </motion.g>
+          <path d="M2 19h3.76a2 2 0 0 0 1.8-1.1L9 15" />
+          <path d="M2 21v-4" />
+        </svg>
+      </div>
+    );
+  }
+);
+
+CctvIcon.displayName = "CctvIcon";
+
+export { CctvIcon };

package/icons/icons/chart-bar-decreasing.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 ChartBarDecreasingIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChartBarDecreasingIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const LINE_VARIANTS: Variants = {
+  visible: { pathLength: 1, opacity: 1 },
+  hidden: { pathLength: 0, opacity: 0 },
+};
+
+const ChartBarDecreasingIcon = forwardRef<
+  ChartBarDecreasingIconHandle,
+  ChartBarDecreasingIconProps
+>(({ 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((i) => ({
+          pathLength: 0,
+          opacity: 0,
+          transition: { delay: i * 0.1, duration: 0.3 },
+        }));
+        await controls.start((i) => ({
+          pathLength: 1,
+          opacity: 1,
+          transition: { delay: i * 0.1, duration: 0.3 },
+        }));
+      },
+      stopAnimation: () => controls.start("visible"),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    async (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        await controls.start((i) => ({
+          pathLength: 0,
+          opacity: 0,
+          transition: { delay: i * 0.1, duration: 0.3 },
+        }));
+        await controls.start((i) => ({
+          pathLength: 1,
+          opacity: 1,
+          transition: { delay: i * 0.1, duration: 0.3 },
+        }));
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("visible");
+      }
+    },
+    [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="M3 3v16a2 2 0 0 0 2 2h16" />
+        <motion.path
+          animate={controls}
+          custom={1}
+          d="M7 11h8"
+          initial="visible"
+          variants={LINE_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={2}
+          d="M7 16h3"
+          initial="visible"
+          variants={LINE_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={0}
+          d="M7 6h12"
+          initial="visible"
+          variants={LINE_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ChartBarDecreasingIcon.displayName = "ChartBarDecreasingIcon";
+
+export { ChartBarDecreasingIcon };

package/icons/icons/chart-bar-increasing.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 ChartBarIncreasingIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChartBarIncreasingIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const LINE_VARIANTS: Variants = {
+  visible: { pathLength: 1, opacity: 1 },
+  hidden: { pathLength: 0, opacity: 0 },
+};
+
+const ChartBarIncreasingIcon = forwardRef<
+  ChartBarIncreasingIconHandle,
+  ChartBarIncreasingIconProps
+>(({ 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((i) => ({
+          pathLength: 0,
+          opacity: 0,
+          transition: { delay: i * 0.1, duration: 0.3 },
+        }));
+        await controls.start((i) => ({
+          pathLength: 1,
+          opacity: 1,
+          transition: { delay: i * 0.1, duration: 0.3 },
+        }));
+      },
+      stopAnimation: () => controls.start("visible"),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    async (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        await controls.start((i) => ({
+          pathLength: 0,
+          opacity: 0,
+          transition: { delay: i * 0.1, duration: 0.3 },
+        }));
+        await controls.start((i) => ({
+          pathLength: 1,
+          opacity: 1,
+          transition: { delay: i * 0.1, duration: 0.3 },
+        }));
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("visible");
+      }
+    },
+    [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="M3 3v16a2 2 0 0 0 2 2h16" />
+        <motion.path
+          animate={controls}
+          custom={1}
+          d="M7 11h8"
+          initial="visible"
+          variants={LINE_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={2}
+          d="M7 16h12"
+          initial="visible"
+          variants={LINE_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={0}
+          d="M7 6h3"
+          initial="visible"
+          variants={LINE_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ChartBarIncreasingIcon.displayName = "ChartBarIncreasingIcon";
+
+export { ChartBarIncreasingIcon };