@romansmirnov/doku 1.0.0

package/icons/icons/square-chevron-left.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 SquareChevronLeftIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquareChevronLeftIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const SquareChevronLeftIcon = forwardRef<
+  SquareChevronLeftIconHandle,
+  SquareChevronLeftIconProps
+>(({ 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="m14 16-4-4 4-4"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { x: 0 },
+            animate: { x: [0, -2, 0] },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SquareChevronLeftIcon.displayName = "SquareChevronLeftIcon";
+
+export { SquareChevronLeftIcon };

package/icons/icons/square-chevron-right.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 SquareChevronRightIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquareChevronRightIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const SquareChevronRightIcon = forwardRef<
+  SquareChevronRightIconHandle,
+  SquareChevronRightIconProps
+>(({ 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="m10 8 4 4-4 4"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { x: 0 },
+            animate: { x: [0, 2, 0] },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SquareChevronRightIcon.displayName = "SquareChevronRightIcon";
+
+export { SquareChevronRightIcon };

package/icons/icons/square-chevron-up.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 SquareChevronUpIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquareChevronUpIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const SquareChevronUpIcon = forwardRef<
+  SquareChevronUpIconHandle,
+  SquareChevronUpIconProps
+>(({ 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="m8 14 4-4 4 4"
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: { y: 0 },
+            animate: { y: [0, -2, 0] },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SquareChevronUpIcon.displayName = "SquareChevronUpIcon";
+
+export { SquareChevronUpIcon };

package/icons/icons/square-pen.tsx

@@ -0,0 +1,101 @@
+"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 SquarePenIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquarePenIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PEN_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+    x: 0,
+    y: 0,
+  },
+  animate: {
+    rotate: [-0.5, 0.5, -0.5],
+    x: [0, -1, 1.5, 0],
+    y: [0, 1.5, -1, 0],
+  },
+};
+
+const SquarePenIcon = forwardRef<SquarePenIconHandle, SquarePenIconProps>(
+  ({ 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"
+          style={{ overflow: "visible" }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+          <motion.path
+            animate={controls}
+            d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"
+            variants={PEN_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+SquarePenIcon.displayName = "SquarePenIcon";
+
+export { SquarePenIcon };

package/icons/icons/square-stack.tsx

@@ -0,0 +1,123 @@
+"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 SquareStackIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SquareStackIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RECT_VARIANTS: Variants = {
+  normal: { scale: 1 },
+  animate: {
+    scale: [1, 0.8, 1],
+    transition: { duration: 0.4 },
+  },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { scale: 1 },
+  animate: {
+    scale: [1, 0.9, 1],
+  },
+};
+
+const SquareStackIcon = forwardRef<SquareStackIconHandle, SquareStackIconProps>(
+  ({ 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="M4 10c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2"
+            transition={{
+              delay: 0.3,
+              duration: 0.4,
+            }}
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M10 16c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2"
+            transition={{
+              delay: 0.2,
+              duration: 0.2,
+            }}
+            variants={PATH_VARIANTS}
+          />
+          <motion.rect
+            animate={controls}
+            height="8"
+            rx="2"
+            variants={RECT_VARIANTS}
+            width="8"
+            x="14"
+            y="14"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+SquareStackIcon.displayName = "SquareStackIcon";
+
+export { SquareStackIcon };

package/icons/icons/stethoscope.tsx

@@ -0,0 +1,192 @@
+"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 StethoscopeIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface StethoscopeIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DURATION = 0.25;
+
+const CALCULATE_DELAY = (i: number) => {
+  return i === 0 ? 0.1 : i * DURATION + 0.1;
+};
+
+const StethoscopeIcon = forwardRef<StethoscopeIconHandle, StethoscopeIconProps>(
+  ({ 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="M11 2v2"
+            transition={{
+              duration: DURATION,
+              delay: CALCULATE_DELAY(2),
+              opacity: { delay: CALCULATE_DELAY(2) },
+            }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                pathOffset: 0,
+                opacity: 1,
+                transition: { delay: 0 },
+              },
+              animate: {
+                pathOffset: [1, 0],
+                pathLength: [0, 1],
+                opacity: [0, 1],
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M5 2v2"
+            transition={{
+              duration: DURATION,
+              delay: CALCULATE_DELAY(2),
+              opacity: { delay: CALCULATE_DELAY(2) },
+            }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                pathOffset: 0,
+                opacity: 1,
+                transition: { delay: 0 },
+              },
+              animate: {
+                pathOffset: [1, 0],
+                pathLength: [0, 1],
+                opacity: [0, 1],
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1"
+            transition={{
+              duration: DURATION,
+              delay: CALCULATE_DELAY(2),
+              opacity: { delay: CALCULATE_DELAY(2) },
+            }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                pathOffset: 0,
+                opacity: 1,
+                transition: { delay: 0 },
+              },
+              animate: {
+                pathLength: [0, 1],
+                pathOffset: [1, 0],
+                opacity: [0, 1],
+              },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M8 15a6 6 0 0 0 12 0v-3"
+            transition={{
+              duration: DURATION,
+              delay: CALCULATE_DELAY(1),
+              opacity: { delay: CALCULATE_DELAY(1) },
+            }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                pathOffset: 0,
+                opacity: 1,
+                transition: { delay: 0 },
+              },
+              animate: {
+                pathOffset: [1, 0],
+                pathLength: [0, 1],
+                opacity: [0, 1],
+              },
+            }}
+          />
+          <motion.circle
+            animate={controls}
+            cx="20"
+            cy="10"
+            r="2"
+            transition={{
+              duration: DURATION,
+              delay: CALCULATE_DELAY(0),
+              opacity: { delay: CALCULATE_DELAY(0) },
+            }}
+            variants={{
+              normal: { pathLength: 1, opacity: 1, transition: { delay: 0 } },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+              },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+StethoscopeIcon.displayName = "StethoscopeIcon";
+
+export { StethoscopeIcon };