@romansmirnov/doku 1.0.0

package/icons/icons/square-activity.tsx

@@ -0,0 +1,132 @@
+"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 ActivityIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ActivityIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const SQUARE_VARIANTS: Variants = {
+  normal: {
+    transition: {
+      duration: 0.4,
+    },
+  },
+  animate: {
+    transition: {
+      duration: 0.6,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const SquareActivityIcon = forwardRef<ActivityIconHandle, ActivityIconProps>(
+  ({ 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.rect
+            animate={controls}
+            height="18"
+            initial="normal"
+            rx="2"
+            variants={SQUARE_VARIANTS}
+            width="18"
+            x="3"
+            y="3"
+          />
+          <motion.path
+            animate={controls}
+            d="M17 12h-2l-2 5-2-10-2 5H7"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+SquareActivityIcon.displayName = "SquareActivityIcon";
+
+export { SquareActivityIcon };

package/icons/icons/square-arrow-down.tsx

@@ -0,0 +1,119 @@
+"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 SquareArrowDownIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquareArrowDownIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SQUARE_VARIANTS: Variants = {
+  normal: { transition: { duration: 0.4 } },
+  animate: { transition: { duration: 0.6, ease: "easeInOut" } },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "m8 12 4 4 4-4", translateY: 0, opacity: 1 },
+  animate: {
+    d: "m8 12 4 4 4-4",
+    translateY: [0, -3, 0],
+    transition: { duration: 0.4 },
+  },
+};
+
+const SECOND_PATH_VARIANTS: Variants = {
+  normal: { d: "M12 8v8", opacity: 1 },
+  animate: {
+    d: ["M12 8v8", "M12 8v5", "M12 8v8"],
+    transition: { duration: 0.4 },
+  },
+};
+
+const SquareArrowDownIcon = forwardRef<
+  SquareArrowDownIconHandle,
+  SquareArrowDownIconProps
+>(({ 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.rect
+          animate={controls}
+          height="18"
+          initial="normal"
+          rx="2"
+          variants={SQUARE_VARIANTS}
+          width="18"
+          x="3"
+          y="3"
+        />
+        <motion.path
+          animate={controls}
+          d="m8 12 4 4 4-4"
+          initial="normal"
+          variants={PATH_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M12 8v8"
+          initial="normal"
+          variants={SECOND_PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SquareArrowDownIcon.displayName = "SquareArrowDownIcon";
+
+export { SquareArrowDownIcon };

package/icons/icons/square-arrow-left.tsx

@@ -0,0 +1,119 @@
+"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 SquareArrowLeftIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquareArrowLeftIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SQUARE_VARIANTS: Variants = {
+  normal: { transition: { duration: 0.4 } },
+  animate: { transition: { duration: 0.6, ease: "easeInOut" } },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "m12 8-4 4 4 4", translateX: 0, opacity: 1 },
+  animate: {
+    d: "m12 8-4 4 4 4",
+    translateX: [0, 3, 0],
+    transition: { duration: 0.4 },
+  },
+};
+
+const SECOND_PATH_VARIANTS: Variants = {
+  normal: { d: "M16 12H8", opacity: 1 },
+  animate: {
+    d: ["M16 12H8", "M16 12H13", "M16 12H8"],
+    transition: { duration: 0.4 },
+  },
+};
+
+const SquareArrowLeftIcon = forwardRef<
+  SquareArrowLeftIconHandle,
+  SquareArrowLeftIconProps
+>(({ 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.rect
+          animate={controls}
+          height="18"
+          initial="normal"
+          rx="2"
+          variants={SQUARE_VARIANTS}
+          width="18"
+          x="3"
+          y="3"
+        />
+        <motion.path
+          animate={controls}
+          d="m12 8-4 4 4 4"
+          initial="normal"
+          variants={PATH_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M16 12H8"
+          initial="normal"
+          variants={SECOND_PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SquareArrowLeftIcon.displayName = "SquareArrowLeftIcon";
+
+export { SquareArrowLeftIcon };

package/icons/icons/square-arrow-right.tsx

@@ -0,0 +1,119 @@
+"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 SquareArrowRightIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquareArrowRightIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SQUARE_VARIANTS: Variants = {
+  normal: { transition: { duration: 0.4 } },
+  animate: { transition: { duration: 0.6, ease: "easeInOut" } },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "M8 12h8", opacity: 1 },
+  animate: {
+    d: ["M8 12h8", "M8 12h5", "M8 12h8"],
+    transition: { duration: 0.4 },
+  },
+};
+
+const SECOND_PATH_VARIANTS: Variants = {
+  normal: { d: "m12 8 4 4-4 4", translateX: 0, opacity: 1 },
+  animate: {
+    d: "m12 8 4 4-4 4",
+    translateX: [0, -3, 0],
+    transition: { duration: 0.4 },
+  },
+};
+
+const SquareArrowRightIcon = forwardRef<
+  SquareArrowRightIconHandle,
+  SquareArrowRightIconProps
+>(({ 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.rect
+          animate={controls}
+          height="18"
+          initial="normal"
+          rx="2"
+          variants={SQUARE_VARIANTS}
+          width="18"
+          x="3"
+          y="3"
+        />
+        <motion.path
+          animate={controls}
+          d="M8 12h8"
+          initial="normal"
+          variants={PATH_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="m12 8 4 4-4 4"
+          initial="normal"
+          variants={SECOND_PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SquareArrowRightIcon.displayName = "SquareArrowRightIcon";
+
+export { SquareArrowRightIcon };

package/icons/icons/square-arrow-up.tsx

@@ -0,0 +1,119 @@
+"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 SquareArrowUpIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquareArrowUpIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SQUARE_VARIANTS: Variants = {
+  normal: { transition: { duration: 0.4 } },
+  animate: { transition: { duration: 0.6, ease: "easeInOut" } },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { d: "m16 12-4-4-4 4", translateY: 0, opacity: 1 },
+  animate: {
+    d: "m16 12-4-4-4 4",
+    translateY: [0, 3, 0],
+    transition: { duration: 0.4 },
+  },
+};
+
+const SECOND_PATH_VARIANTS: Variants = {
+  normal: { d: "M12 16V8", opacity: 1 },
+  animate: {
+    d: ["M12 16V8", "M12 16V13", "M12 16V8"],
+    transition: { duration: 0.4 },
+  },
+};
+
+const SquareArrowUpIcon = forwardRef<
+  SquareArrowUpIconHandle,
+  SquareArrowUpIconProps
+>(({ 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.rect
+          animate={controls}
+          height="18"
+          initial="normal"
+          rx="2"
+          variants={SQUARE_VARIANTS}
+          width="18"
+          x="3"
+          y="3"
+        />
+        <motion.path
+          animate={controls}
+          d="m16 12-4-4-4 4"
+          initial="normal"
+          variants={PATH_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M12 16V8"
+          initial="normal"
+          variants={SECOND_PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SquareArrowUpIcon.displayName = "SquareArrowUpIcon";
+
+export { SquareArrowUpIcon };

package/icons/icons/square-chevron-down.tsx

@@ -0,0 +1,96 @@
+"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 SquareChevronDownIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquareChevronDownIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const SquareChevronDownIcon = forwardRef<
+  SquareChevronDownIconHandle,
+  SquareChevronDownIconProps
+>(({ 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" />
+        <motion.path
+          animate={controls}
+          d="m16 10-4 4-4-4"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { y: 0 },
+            animate: { y: [0, 2, 0] },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SquareChevronDownIcon.displayName = "SquareChevronDownIcon";
+
+export { SquareChevronDownIcon };