@romansmirnov/doku 1.0.0

package/icons/icons/folders.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+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 FoldersIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FoldersIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const FoldersIcon = forwardRef<FoldersIconHandle, FoldersIconProps>(
+  ({ 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 17a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3.9a2 2 0 0 1-1.69-.9l-.81-1.2a2 2 0 0 0-1.67-.9H8a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2Z"
+            transition={{
+              type: "spring",
+              stiffness: 250,
+              damping: 25,
+            }}
+            variants={{
+              normal: {
+                translateX: 0,
+                translateY: 0,
+              },
+              animate: {
+                translateX: -2,
+                translateY: 2,
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M2 8v11a2 2 0 0 0 2 2h14"
+            transition={{
+              type: "spring",
+              stiffness: 250,
+              damping: 25,
+            }}
+            variants={{
+              normal: {
+                translateX: 0,
+                translateY: 0,
+                opacity: 1,
+                scale: 1,
+              },
+              animate: {
+                translateX: 2,
+                translateY: -2,
+                opacity: 0,
+                scale: 0.9,
+              },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FoldersIcon.displayName = "FoldersIcon";
+
+export { FoldersIcon };

package/icons/icons/frame.tsx

@@ -0,0 +1,152 @@
+"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 FrameIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FrameIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 160,
+  damping: 17,
+  mass: 1,
+};
+
+const FrameIcon = forwardRef<FrameIconHandle, FrameIconProps>(
+  ({ 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.line
+            animate={controls}
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              animate: { translateY: -4 },
+              normal: {
+                translateX: 0,
+                rotate: 0,
+                translateY: 0,
+              },
+            }}
+            x1={22}
+            x2={2}
+            y1={6}
+            y2={6}
+          />
+          <motion.line
+            animate={controls}
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              animate: { translateY: 4 },
+              normal: {
+                translateX: 0,
+                rotate: 0,
+                translateY: 0,
+              },
+            }}
+            x1={22}
+            x2={2}
+            y1={18}
+            y2={18}
+          />
+          <motion.line
+            animate={controls}
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              animate: { translateX: -4 },
+              normal: {
+                translateX: 0,
+                rotate: 0,
+                translateY: 0,
+              },
+            }}
+            x1={6}
+            x2={6}
+            y1={2}
+            y2={22}
+          />
+          <motion.line
+            animate={controls}
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              animate: { translateX: 4 },
+              normal: {
+                translateX: 0,
+                rotate: 0,
+                translateY: 0,
+              },
+            }}
+            x1={18}
+            x2={18}
+            y1={2}
+            y2={22}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FrameIcon.displayName = "FrameIcon";
+
+export { FrameIcon };

package/icons/icons/frown.tsx

@@ -0,0 +1,174 @@
+"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 FrownIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FrownIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const FrownIcon = forwardRef<FrownIconHandle, FrownIconProps>(
+  ({ 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) controls.start("animate");
+        onMouseEnter?.(e);
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isControlledRef.current) controls.start("normal");
+        onMouseLeave?.(e);
+      },
+      [controls, onMouseLeave]
+    );
+
+    const faceVariants: Variants = {
+      normal: {
+        scale: 1,
+        rotate: 0,
+        transition: { duration: 0.3, ease: "easeOut" },
+      },
+      animate: {
+        scale: [1, 1.15, 1.05, 1.08],
+        rotate: [0, -2, 2, 0],
+        transition: {
+          duration: 0.8,
+          times: [0, 0.3, 0.6, 1],
+          ease: "easeInOut",
+        },
+      },
+    };
+
+    const mouthVariants: Variants = {
+      normal: {
+        d: "M16 16s-1.5-2-4-2-4 2-4 2",
+        pathLength: 1,
+        transition: { duration: 0.3, ease: "easeOut" },
+      },
+      animate: {
+        d: "M16 17s-1.5-2.5-4-2.5-4 2.5-4 2.5",
+        pathLength: [0.3, 1, 1],
+        transition: {
+          d: { duration: 0.5, ease: "easeOut" },
+          pathLength: {
+            duration: 0.5,
+            times: [0, 0.5, 1],
+            ease: "easeInOut",
+          },
+          delay: 0.1,
+        },
+      },
+    };
+
+    const leftEyeVariants: Variants = {
+      normal: {
+        scale: 1,
+        y: 0,
+        transition: { duration: 0.3, ease: "easeOut" },
+      },
+      animate: {
+        scale: [1, 1.3, 0.9, 1.1],
+        y: [0, -0.5, 0.3, 0],
+        transition: {
+          duration: 0.6,
+          times: [0, 0.3, 0.6, 1],
+          ease: "easeInOut",
+        },
+      },
+    };
+
+    const rightEyeVariants: Variants = {
+      normal: {
+        scale: 1,
+        y: 0,
+        transition: { duration: 0.3, ease: "easeOut" },
+      },
+      animate: {
+        scale: [1, 0.9, 1.3, 1.1],
+        y: [0, -0.5, 0.3, 0],
+        transition: {
+          duration: 0.6,
+          times: [0, 0.3, 0.6, 1],
+          ease: "easeInOut",
+        },
+      },
+    };
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          initial="normal"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={faceVariants}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <motion.path
+            animate={controls}
+            d="M16 16s-1.5-2-4-2-4 2-4 2"
+            initial="normal"
+            variants={mouthVariants}
+          />
+          <motion.line
+            animate={controls}
+            initial="normal"
+            variants={leftEyeVariants}
+            x1="9"
+            x2="9.01"
+            y1="9"
+            y2="9"
+          />
+          <motion.line
+            animate={controls}
+            initial="normal"
+            variants={rightEyeVariants}
+            x1="15"
+            x2="15.01"
+            y1="9"
+            y2="9"
+          />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+FrownIcon.displayName = "FrownIcon";
+
+export { FrownIcon };

package/icons/icons/gallery-horizontal-end.tsx

@@ -0,0 +1,117 @@
+"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 GalleryHorizontalEndIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GalleryHorizontalEndIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    translateX: 0,
+    opacity: 1,
+    transition: {
+      type: "tween",
+      stiffness: 200,
+      damping: 13,
+    },
+  },
+  animate: (i: number) => ({
+    translateX: [2 * i, 0],
+    opacity: [0, 1],
+    transition: {
+      delay: 0.25 * (2 - i),
+      type: "tween",
+      stiffness: 200,
+      damping: 13,
+    },
+  }),
+};
+
+const GalleryHorizontalEndIcon = forwardRef<
+  GalleryHorizontalEndIconHandle,
+  GalleryHorizontalEndIconProps
+>(({ 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}
+          custom={2}
+          d="M6 5v14"
+          variants={PATH_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          custom={1}
+          d="M2 7v10"
+          variants={PATH_VARIANTS}
+        />
+        <rect height="18" rx="2" width="12" x="10" y="3" />
+      </svg>
+    </div>
+  );
+});
+
+GalleryHorizontalEndIcon.displayName = "GalleryHorizontalEndIcon";
+
+export { GalleryHorizontalEndIcon };

package/icons/icons/gallery-thumbnails.tsx

@@ -0,0 +1,100 @@
+"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 GalleryThumbnailsIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface GalleryThumbnailsIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: (i: number) => ({
+    opacity: [0, 1],
+    transition: { delay: i * 0.15, duration: 0.2 },
+  }),
+};
+
+const GalleryThumbnailsIcon = forwardRef<
+  GalleryThumbnailsIconHandle,
+  GalleryThumbnailsIconProps
+>(({ 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="18" x="3" y="3" />
+        {["M4 21h1", "M9 21h1", "M14 21h1", "M19 21h1"].map((d, index) => (
+          <motion.path
+            animate={controls}
+            custom={index + 1}
+            d={d}
+            key={d}
+            variants={PATH_VARIANTS}
+          />
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+GalleryThumbnailsIcon.displayName = "GalleryThumbnailsIcon";
+
+export { GalleryThumbnailsIcon };