@romansmirnov/doku 1.0.0

package/icons/icons/chevron-right.tsx

@@ -0,0 +1,95 @@
+"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 ChevronRightIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChevronRightIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const ChevronRightIcon = forwardRef<
+  ChevronRightIconHandle,
+  ChevronRightIconProps
+>(({ 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="m9 18 6-6-6-6"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { x: 0 },
+            animate: { x: [0, 2, 0] },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ChevronRightIcon.displayName = "ChevronRightIcon";
+
+export { ChevronRightIcon };

package/icons/icons/chevron-up.tsx

@@ -0,0 +1,94 @@
+"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 ChevronUpIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChevronUpIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const ChevronUpIcon = forwardRef<ChevronUpIconHandle, ChevronUpIconProps>(
+  ({ 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="m18 15-6-6-6 6"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { y: 0 },
+              animate: { y: [0, -2, 0] },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ChevronUpIcon.displayName = "ChevronUpIcon";
+
+export { ChevronUpIcon };

package/icons/icons/chevrons-down-up.tsx

@@ -0,0 +1,108 @@
+"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 ChevronsDownUpIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChevronsDownUpIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 250,
+  damping: 25,
+};
+
+const ChevronsDownUpIcon = forwardRef<
+  ChevronsDownUpIconHandle,
+  ChevronsDownUpIconProps
+>(({ 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 20 5-5 5 5"
+          initial="normal"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateY: "0%" },
+            animate: { translateY: "-2px" },
+          }}
+        />
+        <motion.path
+          animate={controls}
+          d="m7 4 5 5 5-5"
+          initial="normal"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateY: "0%" },
+            animate: { translateY: "2px" },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ChevronsDownUpIcon.displayName = "ChevronsDownUpIcon";
+
+export { ChevronsDownUpIcon };

package/icons/icons/chevrons-left-right.tsx

@@ -0,0 +1,108 @@
+"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 ChevronsLeftRightIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChevronsLeftRightIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 250,
+  damping: 25,
+};
+
+const ChevronsLeftRightIcon = forwardRef<
+  ChevronsLeftRightIconHandle,
+  ChevronsLeftRightIconProps
+>(({ 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="m9 7-5 5 5 5"
+          initial="normal"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateX: "0%" },
+            animate: { translateX: "-2px" },
+          }}
+        />
+        <motion.path
+          animate={controls}
+          d="m15 7 5 5-5 5"
+          initial="normal"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateX: "0%" },
+            animate: { translateX: "2px" },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ChevronsLeftRightIcon.displayName = "ChevronsLeftRightIcon";
+
+export { ChevronsLeftRightIcon };

package/icons/icons/chevrons-right-left.tsx

@@ -0,0 +1,108 @@
+"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 ChevronsRightLeftIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChevronsRightLeftIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 250,
+  damping: 25,
+};
+
+const ChevronsRightLeftIcon = forwardRef<
+  ChevronsRightLeftIconHandle,
+  ChevronsRightLeftIconProps
+>(({ 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="m20 17-5-5 5-5"
+          initial="normal"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateX: "0%" },
+            animate: { translateX: "-2px" },
+          }}
+        />
+        <motion.path
+          animate={controls}
+          d="m4 17 5-5-5-5"
+          initial="normal"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateX: "0%" },
+            animate: { translateX: "2px" },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ChevronsRightLeftIcon.displayName = "ChevronsRightLeftIcon";
+
+export { ChevronsRightLeftIcon };

package/icons/icons/chevrons-up-down.tsx

@@ -0,0 +1,108 @@
+"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 ChevronsUpDownIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ChevronsUpDownIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 250,
+  damping: 25,
+};
+
+const ChevronsUpDownIcon = forwardRef<
+  ChevronsUpDownIconHandle,
+  ChevronsUpDownIconProps
+>(({ 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 15 5 5 5-5"
+          initial="normal"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateY: "0%" },
+            animate: { translateY: "2px" },
+          }}
+        />
+        <motion.path
+          animate={controls}
+          d="m7 9 5-5 5 5"
+          initial="normal"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { translateY: "0%" },
+            animate: { translateY: "-2px" },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+ChevronsUpDownIcon.displayName = "ChevronsUpDownIcon";
+
+export { ChevronsUpDownIcon };